React技巧之發出http請求

chuck發表於2022-07-02
ReactHTTP

原文連結：https://bobbyhadz.com/blog/react-send-request-on-click

作者：Borislav Hadzhiev

正文從這開始~

總覽

在React中，通過點選事件發出http請求：

  1. 在元素上設定onClick屬性。
  2. 每當元素被點選時，發出http請求。
  3. 更新state變數，並重新渲染資料。
如果你使用axios，請向下滾動到下一個程式碼片段。
import {useState} from 'react';

const App = () => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [err, setErr] = useState('');

  const handleClick = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('<https://reqres.in/api/users>', {
        method: 'POST',
        body: JSON.stringify({
          name: 'John Smith',
          job: 'manager',
        }),
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error(`Error! status: ${response.status}`);
      }

      const result = await response.json();

      console.log('result is: ', JSON.stringify(result, null, 4));

      setData(result);
    } catch (err) {
      setErr(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  console.log(data);

  return (
    <div>
      {err && <h2>{err}</h2>}

      <button onClick={handleClick}>Make request</button>

      {isLoading && <h2>Loading...</h2>}

      {data && (
        <div>
          <h2>Name: {data.name}</h2>
          <h2>Job: {data.job}</h2>
        </div>
      )}
    </div>
  );
};

export default App;

react-make-request-on-click.gif

fetch

上述示例向我們展示了，在React中，如何通過點選按鈕傳送HTTP POST 請求。

我們在button元素上設定了onClick屬性，因此每當按鈕被點選時，handleClick函式將會被呼叫。我們通過async關鍵字標記了handleClick函式，因此我們可以使用await關鍵字來等待內部的Promise返回。

在handleClick函式中，我們等待POST請求的完成並更新state變數。

該示例使用了原生的 fetch API，但如果你使用axios依賴包，這個概念也適用。

axios

下面是如何使用axios包在點選按鈕時發出http POST請求。

如果你決定使用axios，請確保你已經通過執行npm install axios安裝了該軟體包。

import {useState} from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [err, setErr] = useState('');

  const handleClick = async () => {
    setIsLoading(true);
    try {
      const {data} = await axios.post(
        '<https://reqres.in/api/users>',
        {name: 'John Smith', job: 'manager'},
        {
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          },
        },
      );

      console.log(JSON.stringify(data, null, 4));

      setData(data);
    } catch (err) {
      setErr(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  console.log(data);

  return (
    <div>
      {err && <h2>{err}</h2>}

      <button onClick={handleClick}>Make request</button>

      {isLoading && <h2>Loading...</h2>}

      {data && (
        <div>
          <h2>Name: {data.name}</h2>
          <h2>Job: {data.job}</h2>
        </div>
      )}
    </div>
  );
};

export default App;

react-make-request-on-click.gif

上述示例向我們展示了，如何使用axios在點選按鈕時，發出http POST 請求。

如果你使用axios，請確保你已經在專案的根目錄下執行npm install axios來安裝該包。

使用axios包時的語法更簡潔一些，我們要處理的實現細節也更少，但概念是一樣的。

我們必須在一個按鈕元素上設定onClick屬性，並在每次點選按鈕時發出一個HTTP請求。

相關文章