React技巧之发出http请求
原文链接:https://bobbyhadz.com/blog/react-send-request-on-click[1]
作者:Borislav Hadzhiev[2]
正文从这开始~
总览
在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;
react-make-request-on-click.gif
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;
react-make-request-on-click.gif
上述示例向我们展示了,如何使用axios
在点击按钮时,发出http POST
请求。
如果你使用
axios
,请确保你已经在项目的根目录下运行npm install axios
来安装该包。
使用axios
包时的语法更简洁一些,我们要处理的实现细节也更少,但概念是一样的。
我们必须在一个按钮元素上设置onClick
属性,并在每次点击按钮时发出一个HTTP请求。
参考资料
[1]
https://bobbyhadz.com/blog/react-send-request-on-click: https://bobbyhadz.com/blog/react-send-request-on-click
[2]
Borislav Hadzhiev: https://bobbyhadz.com/about
相关文章
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- 滴滴前端高频react面试题总结
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- 前端一面react面试题(持续更新中)_2023-02-27
- react源码分析:深度理解React.Context_2023-02-28
- 阿里前端二面常考react面试题(必备)_2023-02-28
- React源码学习入门(八)React组件挂载Component细节流程
- React源码学习进阶(四)render流程的入口逻辑详解
- React源码分析--commit
- React Fiber 是什么?
- 在React中使用 react-router-dom 编程式路由导航【含V5.x、V6.x】
- react源码分析:深度理解React.Context_2023-02-07
- React源码分析4-深度理解diff算法_2023-02-20
- React源码分析2-深入理解fiber_2023-02-20
- 部署Linux服务器,实现高效安全的HTTP通信(http服务器linux)
- 端口Linux查看HTTP端口:一步一步指南(linux查看http)
- 请求使用Linux发送HTTP请求的方法(linux发送http)
- 服务器Linux下简易配置HTTP服务器(linux配置http)
- 极速搭建Linux下HTTP代理服务器(linux搭建http代理)
- Linux搭建HTTP代理实现网络自由访问(linux搭建http代理)
- 坚实的 React 基础:初学者指南
- React 许可证虽严苛,但不必过度 react
- 深入浅出Mongodb Http: 开箱即用的可扩展性数据库(mongodb http)
- Linux快速搭建超强HTTP服务器(linux搭建http服务器)
- 数据库使用HTTP连接Oracle数据库的简单操作(http连接oracle)
- 一步之遥从HTTP访问Oracle数据库(http访问oracle)