原文链接：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;

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;

上述示例向咱们展现了，如何应用axios在点击按钮时，收回http POST 申请。

如果你应用axios，请确保你曾经在我的项目的根目录下运行npm install axios来装置该包。

应用axios包时的语法更简洁一些，咱们要解决的实现细节也更少，但概念是一样的。

咱们必须在一个按钮元素上设置onClick属性，并在每次点击按钮时收回一个HTTP申请。