React技巧之发出http请求

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

作者：Borislav Hadzhiev

正文从这开始~

总览

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

在元素上设置onClick属性。
每当元素被点击时，发出http请求。
更新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;