React技巧之发出http请求

原文链接: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('', { 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 ({err && {err}}{isLoading && Loading...}{data && (Name: {data.name} Job: {data.job})}); }; export default App;

React技巧之发出http请求
文章图片

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( '', {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 ({err && {err}}{isLoading && Loading...}{data && (Name: {data.name} Job: {data.job})}); }; export default App;

React技巧之发出http请求
文章图片

上述示例向我们展示了,如何使用axios在点击按钮时,发出http POST 请求。
如果你使用axios,请确保你已经在项目的根目录下运行npm install axios来安装该包。
使用axios包时的语法更简洁一些,我们要处理的实现细节也更少,但概念是一样的。
【React技巧之发出http请求】我们必须在一个按钮元素上设置onClick属性,并在每次点击按钮时发出一个HTTP请求。

    推荐阅读