React從Go REST API獲取資料範例。
範例環境：
- Go 1.19
- React 18
Go
Golang 建立網頁伺服器 Web Server網址為http:localhost:8080。
新增一個http.HandleFunc提供API GET|/messages用來給React取得Message資料。
Go Web Server網址為http://localhost:8080與前端React http://localhost:3000屬於不同源的網路資源，瀏覽器預設會限制CORS(Cross-Origin Resource Sharing)，因此Server端必須設定允許CORS否則React無法從Go的REST API取得資料。
main.go
package main
import (
"encoding/json"
"fmt"
"net/http"
)
func main() {
http.HandleFunc("/messages", func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "text/html; charset=utf-8")
w.Header().Set("Access-Control-Allow-Origin", "*") // allow CORS
messages := []string{
"How are you?",
"I'm fine, thank you.",
}
data, _ := json.Marshal(messages)
fmt.Fprint(w, string(data)) // write out content
})
http.ListenAndServe(":8080", nil)
}
使用cURL或直接在瀏覽器測試API回傳以下結果。
["How are you?","I'm fine, thank you."]
React
建立React應用程式網址為http:localhost:3000。
App.js內容如下，建立ComponentMessage。
App.js
import { useEffect, useState } from "react";
import './App.css';
import * as React from 'react';
function App() {
return (
<Message/>
);
}
const Message = () => {
const [messages, setMessages] = useState([])
useEffect(() => {
fetch("http://localhost:8080/messages")
.then(response => response.json())
.then(data => setMessages(data))
},[])
return (
<>
{
messages.map((message, i) => {
return (
<div key={i}>{message}</div>
)
})
}
</>
)
}
export default App;
Message component中的useEffect()使用JavaScript的fetch()呼叫Go的GET|/messages取得response後轉成json呼叫setMessages()更新Message.state.messages的狀態。useEffect()第二個參數為dependency array，使用一個空陣列避免因狀態改變造成的無窮迴圈。
測試
在瀏覽器輸入http://localhost:3000回傳的html內容如下。
<div>How are you?</div>
<div>I'm fine, thank you.</div>
沒有留言:
張貼留言