React技巧之发出http请求

原文链接：https://bobbyhadz.com/blog/react-send-request-on-click
作者：Borislav Hadzhiev
正文从这开始~
总览

在React中，通过点击事件发出http请求：

• 在元素上设置onClick属性。
  
• 每当元素被点击时，发出http请求。
  
• 更新state变量，并重新渲染数据。
  

如果你使用axios，请向下滚动到下一个代码片段。

1. import {useState} from 'react';
3. const App = () => {
4.   const [data, setData] = useState();
5.   const [isLoading, setIsLoading] = useState(false);
6.   const [err, setErr] = useState('');
8.   const handleClick = async () => {
9.     setIsLoading(true);
10.     try {
11.       const response = await fetch('<https://reqres.in/api/users>', {
12.         method: 'POST',
13.         body: JSON.stringify({
14.           name: 'John Smith',
15.           job: 'manager',
16.         }),
17.         headers: {
18.           'Content-Type': 'application/json',
19.           Accept: 'application/json',
20.         },
21.       });
23.       if (!response.ok) {
24.         throw new Error(`Error! status: ${response.status}`);
25.       }
27.       const result = await response.json();
29.       console.log('result is: ', JSON.stringify(result, null, 4));
31.       setData(result);
32.     } catch (err) {
33.       setErr(err.message);
34.     } finally {
35.       setIsLoading(false);
36.     }
37.   };
39.   console.log(data);
41.   return (
42.    
43.       {err && <h2>{err}</h2>}
45.       <button onClick={handleClick}>Make request</button>
47.       {isLoading && <h2>Loading...</h2>}
49.       {data && (
50.         
51.           <h2>Name: {data.name}</h2>
52.           <h2>Job: {data.job}</h2>
53.         
54.       )}
55.    
56.   );
57. };
59. 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安装了该软件包。

1. import {useState} from 'react';
2. import axios from 'axios';
4. const App = () => {
5.   const [data, setData] = useState();
6.   const [isLoading, setIsLoading] = useState(false);
7.   const [err, setErr] = useState('');
9.   const handleClick = async () => {
10.     setIsLoading(true);
11.     try {
12.       const {data} = await axios.post(
13.         '<https://reqres.in/api/users>',
14.         {name: 'John Smith', job: 'manager'},
15.         {
16.           headers: {
17.             'Content-Type': 'application/json',
18.             Accept: 'application/json',
19.           },
20.         },
21.       );
23.       console.log(JSON.stringify(data, null, 4));
25.       setData(data);
26.     } catch (err) {
27.       setErr(err.message);
28.     } finally {
29.       setIsLoading(false);
30.     }
31.   };
33.   console.log(data);
35.   return (
36.    
37.       {err && <h2>{err}</h2>}
39.       <button onClick={handleClick}>Make request</button>
41.       {isLoading && <h2>Loading...</h2>}
43.       {data && (
44.         
45.           <h2>Name: {data.name}</h2>
46.           <h2>Job: {data.job}</h2>
47.         
48.       )}
49.    
50.   );
51. };
53. export default App;

复制代码

上述示例向我们展示了，如何使用axios在点击按钮时，发出http POST 请求。

如果你使用axios，请确保你已经在项目的根目录下运行npm install axios来安装该包。

使用axios包时的语法更简洁一些，我们要处理的实现细节也更少，但概念是一样的。
我们必须在一个按钮元素上设置onClick属性，并在每次点击按钮时发出一个HTTP请求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！