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 = useState();
const = useState(false);
const = 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 (
{err && <h2>{err}</h2>}
<button onClick={handleClick}>Make request</button>
{isLoading && <h2>Loading...</h2>}
{data && (
<h2>Name: {data.name}</h2>
<h2>Job: {data.job}</h2>
)}
);
};
export default App;https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86c69101c08d4ec6b822c70dd353fe7a~tplv-k3u1fbpfcp-watermark.image?
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 = useState();
const = useState(false);
const = 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 (
{err && <h2>{err}</h2>}
<button onClick={handleClick}>Make request</button>
{isLoading && <h2>Loading...</h2>}
{data && (
<h2>Name: {data.name}</h2>
<h2>Job: {data.job}</h2>
)}
);
};
export default App;https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86c69101c08d4ec6b822c70dd353fe7a~tplv-k3u1fbpfcp-watermark.image?
上述示例向我们展示了，如何使用axios在点击按钮时，发出http POST 请求。
如果你使用axios，请确保你已经在项目的根目录下运行npm install axios来安装该包。
使用axios包时的语法更简洁一些，我们要处理的实现细节也更少，但概念是一样的。
我们必须在一个按钮元素上设置onClick属性，并在每次点击按钮时发出一个HTTP请求。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]