当前位置：首页 > news >正文

源码app陪玩，React技巧之发出http请求 - 云豹科技

news 2025/9/15 18:03:45

源码app陪玩，React技巧之发出http请求

总览

在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('<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;