React 使用Axois獲取REST API資料

React使用Axois獲取REST API資料。

Axois是Node.js基於Promise特性的HTTP client函式庫。

事前要求

參考「React 使用Create React App建立React應用程式」建立React應用程式。

安裝

在專案的/app目錄下以命令列輸入npm install axios。

~/../react-demo/app% npm install axios

安裝後在app/package.json可看到"axios": "^1.6.8"。

使用

例如本機後端有一API GET | http://localhost:8080/messages會回傳以下資料。

["How are you?","I'm fine, thank you."]

修改App.js內容如下，建立Message Component。

在Message component的useEffect中使用axios.get發出GET請求，然後在then接收回傳資料並呼叫setMessages將資料設定到Message的messages state。

App.js

import { useEffect, useState } from "react";
import './App.css';
import axios from 'axios';

import * as React from 'react';

function App() {
  return (
    <Message/>
  );
}

const Message = () => {
  const [messages, setMessages] = useState([])
  useEffect(() => {
    axios.get('http://localhost:8080/messages')
      .then(resp => {
        setMessages(resp.data)
      })
      .catch(error => {
        console.log(error)
      })
      .finally(() => {
        console.log('done')
      })
  },[])

  return (
    <>
      {
        messages.map((message, i) => {
          return (
          <div key={i}>{message}</div>
          )
        })
      }
    </>
  )
}

export default App;

• React fetch data from Go REST API