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;

github。

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>

沒有留言:

張貼留言

菜鳥工程師肉豬

AdSense

網頁

2022/12/10

React fetch data from Go REST API

Go