React自定义Hook之useRequest

一、简介

通过自定义hook,实现对http请求封装。

支持loading状态判断请求进度,支持获取请求正确和错误结果。

二、技术方案

use request hook

export const useRequest = (options) => {// 请求参数const [url, ...init] = options;// 请求返回的数据const [data, setData] = useState(null);// 请求返回的错误信息const [error, setError] = useState(null);// 请求的loading 状态const [loading, setLoading] = useState(false);function loader(){setLoading(true);return fetch(url, init).then((res) =>{setData(res.json());setLoading(false);}).catch((error) => {setError(error);setLoading(false); });}return {loader, data, error, loading};}

使用样例

const {data, loader, error, isLoading} = useRequest({url:'/api/get/user',method:'GET',headers:{"Content-Type":"application/json"}}
);
return (
<Button onClick = {()=>{loader()}}>获取数据</Button><div>{isLoading ? <span>加载中</span> : <span>data</span>}
</div>
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter笔记:Matrix4矩阵变换与案例

Flutter笔记 Matrix4矩阵变换及其案例 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134474764 【简介…

【OpenCV】仿射变换中cv2.estimateAffine2D 的原理

目录 一、介绍 二、仿射变换矩阵 (M) 1.M中六个元素的说明 2.计算旋转角度 3.M的计算过程 三、输出状态 (inliers) 四、错切参数 1.错切参数的定义 2.错切参数例子 &#xff08;1&#xff09;水平错切 &#xff08;2&#xff09;垂直错切 一、介绍 cv2.estimateAffi…

深度学习系列54:使用 MMDETECTION 和 LABEL-STUDIO 进行半自动化目标检测标注

参考https://mmdetection.readthedocs.io/zh-cn/latest/user_guides/label_studio.html&#xff0c;这里进行简要概述&#xff1a; 1. 启动目标检测服务 在mmdetection文件夹中&#xff0c;执行 label-studio-ml start projects/LabelStudio/backend_template --with \ conf…

WIFI版本云音响设置教程腾讯云平台版本

文章目录 WIFI版本云音响设置教程腾讯云平台版本一、申请设备三元素1.腾讯云物联网平台2.创建产品3.设置产品参数4.添加设备5.获取三元素 二、设置设备三元素1.打开MQTTConfigTools2.计算MQTT参数3.使用windows电脑的WIFI连接到设备热点4.设置参数 三、腾讯云物联网套件协议使用…

gin相关操作--一起学习921190764

gin官方文档 https://gin-gonic.com/docs/quickstart/1. 安装 go get -u github.com/gin-gonic/ginhttps://github.com/gin-gonic/gin简单入门 package mainimport ("github.com/gin-gonic/gin""net/http" )func pong(c *gin.Context) {//c.JSON(http.S…

.NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅仅是技术还有人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔 !背景介绍 突然闯到路径搜索算法里…

Linux入门必备指令

Linux学习之路起始篇——Linux基本指令 文章目录 Linux学习之路起始篇——Linux基本指令**一、ls指令****二、pwd命令****三、cd命令****四、touch指令****五、mkdir命令****六、rm命令****七、man 命令****八、cp命令****九、mv命令****10、cat 指令****十一、tac命令** 前言&…

算法设计与分析 | 众数问题(c语言)

题目 所谓众数&#xff0c;就是对于给定的含有N个元素的多重集合&#xff0c;每个元素在S中出现次数最多的成为该元素的重数&#xff0c; 多重集合S重的重数最大的元素成为众数。例如&#xff1a;S{1,2,2,2,3,5}&#xff0c;则多重集S的众数是2&#xff0c;其重数为3。 现在你…

[机缘参悟-119] :反者道之动与阴阳太极

目录 一、阴阳对立、二元对立的规律 1.1 二元对立 1.2 矛盾的对立与统一 二、阴阳互转、阴阳变化、变化无常 》无序变化和有序趋势的规律 三、阴阳合一、佛魔一体、善恶同源 四、看到积极的一面 五、反者道之动 5.1 概述 5.2 "否极泰来" 5.3 “乐极生悲”…

I.MX6ULL开发笔记(一)——环境搭建、镜像烧录、网络连接

本系列为使用野火IMX6ULL开发的学习笔记&#xff0c;使用的开发板为如下&#xff1a; 具有的硬件资源有如下&#xff1a; 文章目录 一、环境搭建Win11安装WSL安装串口驱动安装串口工具安装Ubuntu与windows文件互传 二、镜像烧录修改串口终端登录前信息 三、fire-config工具配…

今年跳槽成功测试工程师原来是掌握了这3个“潜规则”

随着金九银十逐渐进入尾声&#xff0c;还在观望机会的朋友们已经开始焦躁&#xff1a;“为什么我投的简历还没有回音&#xff1f;要不要趁现在裸辞好好找工作&#xff1f;” “金九银十”作为人们常说的传统“升职加薪”的黄金季节&#xff0c;也是许多人跳槽的理想时机。然而…

一个完备的手游地形实现方案

一、地形几何方案&#xff1a;Terrain 与 Mesh 1.1 目前手游主流地形几何方案分析 先不考虑 LOD 等优化手段&#xff0c;目前地形的几何方案选择有如下几种&#xff1a; 使用 Unity 自带的 Terrain使用 Unity 自带的 Terrain&#xff0c;但是等美术资产完成后使用工具转为 M…

SVR和SVM是什么关系

SVR&#xff08;Support Vector Regression&#xff09;和 SVM&#xff08;Support Vector Machines&#xff09;是支持向量机&#xff08;Support Vector Machine&#xff09;的两个不同方面&#xff0c;分别用于回归和分类问题。 SVM (Support Vector Machines): SVM是一种用…

C语言前瞻

文章目录 C语言基础简介编译方式分布编译示例流程一步编译 代码运行运行结果展示实际代码 C语言基础简介 关于C语言的书籍&#xff0c;文章有很多。C的历史我不赘述&#xff0c;只讲C语言的基础语法和使用&#xff0c;帮助大家入门&#xff0c;同时也是自己学习过程的一个回顾。…

HandBrake :MacOS专业视频转码工具

handbrake 俗称大菠萝&#xff0c;是一款免费开源的视频转换、压缩软件&#xff0c;它几乎支持目前市面上所能见到的所有视频格式&#xff0c;并且支持电脑硬件压缩&#xff0c;是一款不可多得的优秀软件 优点 ∙Windows, Linux, Mac 三平台支持 ∙开源、免费、无广告 ∙支…

Redis-高性能原理剖析

redis安装 下载地址&#xff1a;http://redis.io/download 安装步骤&#xff1a; # 安装gcc yum install gcc# 把下载好的redis-5.0.3.tar.gz放在/usr/local文件夹下&#xff0c;并解压 wget http://download.redis.io/releases/redis-5.0.3.tar.gz tar -zxvf redis-5.0.3.tar…

Ubuntu源码编译gdal3.6.2

在华为云申请了一台Ubuntu v18的机器,乱七八糟的不要装。 apt install build-essential pkg-config -y cmake-3.21.1 apt-get install openssl libssl-dev 过程参考&#xff1a;Yukon for PostgreSQL_格來羙、日出的博客-CSDN博客 zlib-1.2.9(不需要) 如果用系统的后面gd…

.NET 8 Video教程介绍(开篇)

教程简介 本文将简单描述视频网站教程&#xff0c;视频网站是一个类似于腾讯视频一样的网站&#xff0c;视频资源用户自己上传&#xff0c;然后提供友好的界面查看视频和搜索视频&#xff0c;并且提供管理页面对于视频进行管理&#xff0c;我们将使用Blazor作为前端&#xff0…

【Spring】SpringBoot的扩展点之ApplicationContextInitializer

简介 其实spring启动步骤中最早可以进行扩展的是实现ApplicationContextInitializer接口。来看看这个接口的注释。 package org.springframework.context;/*** Callback interface for initializing a Spring {link ConfigurableApplicationContext}* prior to being {linkpl…

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】MobileNets_V2模型算法详解

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】MobileNets_V2模型算法详解 文章目录 【图像分类】【深度学习】【轻量级网络】【Pytorch版本】MobileNets_V2模型算法详解前言MobleNet_V2讲解反向残差结构(Inverted Residuals)兴趣流形(Manifold of interest)线性瓶颈层…