原文链接: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('<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;

上述示例向我们展示了,如何使用axios在点击按钮时,发出http POST 请求。

如果你使用axios,请确保你已经在项目的根目录下运行npm install axios来安装该包。

使用axios包时的语法更简洁一些,我们要处理的实现细节也更少,但概念是一样的。

我们必须在一个按钮元素上设置onClick属性,并在每次点击按钮时发出一个HTTP请求。

React技巧之发出http请求的更多相关文章

  1. 无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同。如果服务器位于远程计算机上,请检查。。。

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Ser ...

  2. 发出HTTP请求并获得HTTP响应

    发出HTTP请求并获得HTTP响应的过程如下: (1)定义HTTP请求HttpPut(HttpPost/HttpGet/HttpDelete)等: (2)定义各种Header,并加入HttpPut中: ...

  3. 转:无法向会话状态服务器发出会话状态请求请。确保 ASP.NET State Service (ASP.NET 状态服务)已启动

    今天看到一篇文章感觉不错,收藏转载下. 原文地址:http://blog.csdn.net/sntyy/article/details/2090347 版权为原作者所有 无法向会话状态服务器发出会话状 ...

  4. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  5. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  6. 无法向会话状态服务器发出会话状态请求请。确保 ASP.NET State Service (ASP.NET 状态服务)已启动

    原文链接:http://www.cnblogs.com/IT-Bear/archive/2012/01/04/2311546.html 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET S ...

  7. System.Web.HttpException: 无法向会话状态服务器发出会话状态请求

    System.Web.HttpException: 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器 ...

  8. [Postman]发出SOAP请求(18)

    使用Postman发出SOAP请求: 将SOAP端点作为URL.如果您使用的是WSDL,那么请将WSDL的路径作为URL. 将请求方法设置为POST. 打开原始编辑器,并将正文类型设置为“text / ...

  9. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

随机推荐

  1. python入门基础—安装

    说明:0基础,那就先练习python语言基础知识,等基础知识牢固了,再对各开发平台分别进行介绍.这里只介绍两个简单而又容易搭建开发平台Anaconda和pycharm Anaconda是一个开源的Py ...

  2. C语言结构体指针与结构体变量作形参的区别

    区别 结构体变量 结构体变量作为形参,传递的是结构体变量本身,是一种值传递 形参结构体变量成员值的改变不影响对应的实参构体变量成员值的改变 结构体指针 结构体指针作为函数参数,传递的是指向结构体变量的 ...

  3. Go Slice Tricks Cheat Sheet、Go 切片使用小妙招

    AppendVector. Copy. Cut. Delete. Delete without preserving order. Cut (GC). Delete (GC). Delete with ...

  4. android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面

    android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面 首先写添加到数据库 在DBOpenHelper中添加创建记账表的语句 //创建记账表 sql = "c ...

  5. Anaconda下安装Tensorflow、keras问题及解决办法

    这两天一直在跟tensorflow的错误日志作斗争!安装过程中出现各种问题,找资料,采坑,终于装好了,做个小总结! keras需要在TensorFlow之上才能运行,所以需要先安装TensorFlow ...

  6. GO语言学习——基本数据类型字符串

    字符串 Go语言中的字符串以原生数据类型出现. Go 语言里的字符串的内部实现使用UTF-8编码. 字符串的值为双引号(")中的内容,可以在Go语言的源码中直接添加非ASCII码字符 GO语 ...

  7. 【2022.04.19】Docker-compose一键安装mirai,搭建QQ机器人最快方法

    先用官方的脚本安装下docker curl -sSL https://get.docker.com/ | sh 安装docker-compose curl -L "https://githu ...

  8. 如何设计一个良好的API接口?

    沟通创造价值,分享带来快乐.这里是程序员阅读时间,每天和你分享读书心得,欢迎您每天和我一起精进.今天和大家一起讨论的话题是如何设计一个良好的API接口? 作者:梁桂钊 解读:张飞洪 挑战 API是软件 ...

  9. [AcWing 2816] 判断子序列

    点击查看代码 #include<iostream> using namespace std; const int N = 1e5 + 10; int a[N], b[N]; int mai ...

  10. 《Streaming Systems》第二章: 数据处理中的 What, Where, When, How

    本章中,我们将通过对 What,Where,When,How 这 4 个问题的回答,逐步揭开流处理过程的全貌. What:计算什么结果? 也就是我们进行数据处理的目的,答案是转换(transforma ...