ToB企服应用市场:ToB评测及商务社交产业平台

标题: React技巧之发出http请求 [打印本页]
作者: 王國慶    时间: 2022-8-13 09:28
标题: React技巧之发出http请求
原文链接：https://bobbyhadz.com/blog/react-send-request-on-click
作者：Borislav Hadzhiev
正文从这开始~
总览

在React中，通过点击事件发出http请求：
如果你使用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请求。

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4