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

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>
)

相关文章:

React自定义Hook之useRequest

一、简介 通过自定义hook&#xff0c;实现对http请求封装。 支持loading状态判断请求进度&#xff0c;支持获取请求正确和错误结果。 二、技术方案 use request hook export const useRequest (options) > {// 请求参数const [url, ...init] options;// 请求返回的数…...

【LeetCode】挑战100天 Day13(热题+面试经典150题)

【LeetCode】挑战100天 Day13&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-152.1 题目2.2 题解 三、面试经典 150 题-153.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…...

Android 11.0 SystemUI 去掉状态栏wifi流量上下行图标功能实现

1.概述 在11.0系统定制rom开发中,在关于systemui的定制功能总,在SystemUI 状态栏上显示时钟,电池电量 wifi图标,在显示wifi图标时,网络实时更新时,但是会时不时显示上下行图标 显得很不美观,客户需求要求不显示上下行图标,所以需要去掉上下行图标功能,接下来实现相关功能…...

掌握Net User命令:轻松创建、修改、删除和查看本地用户帐户

net user 命令用于管理本地用户帐户。它可以用于创建、修改、删除用户帐户&#xff0c;以及查看用户帐户的信息 在Windows操作系统中&#xff0c;Net User命令是一个强大的工具&#xff0c;它允许管理员创建、修改、删除和查看本地用户帐户。无论你是IT专业人士还是普通用户&am…...

性能优化中使用Profiler进行页面卡顿的排查及解决方式

文章目录 一、前言二、页面卡顿的排查方式1、耗时操作的监控2、页面卡顿的监控 三、参考链接 一、前言 程序的优化在做过线上bug处理&#xff0c;布局层级优化&#xff0c;项目依赖库版本更新&#xff0c;重复库合并&#xff0c;删除未使用的资源&#xff0c;删除冗余的库&…...

深入了解Java8新特性-日期时间API_LocalDate类

阅读建议 嗨&#xff0c;伙计&#xff01;刷到这篇文章咱们就是有缘人&#xff0c;在阅读这篇文章前我有一些建议&#xff1a; 本篇文章大概12000多字&#xff0c;预计阅读时间长需要10分钟。本篇文章的实战性、理论性较强&#xff0c;是一篇质量分数较高的技术干货文章&…...

PyTorch基本操作和工作流程

1. PyTorch基础 张量&#xff08;Tensors&#xff09;&#xff1a; 学习 PyTorch 中表示数据的基本单元。了解如何创建、操作和使用张量。 自动微分&#xff08;Autograd&#xff09;&#xff1a; 了解 PyTorch 的自动微分机制&#xff0c;这是训练神经网络的核心。 模型定义…...

Android开发从0开始(ContentProvider与数据)

内容提供者&#xff1a;ContentProvider 为App存取内部数据提供外部接口&#xff0c;让不同应用共享数据。 ①在配置里AndroidManifest.xml <provider android:name".UserInfoProvider" android:authorities"com.example.chapter07_server.provider.U…...

STM32_6(TIM)

TIM定时器&#xff08;第一部分&#xff09; TIM&#xff08;Timer&#xff09;定时器定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时不仅…...

Linux中flask项目开启https访问

1.下载阿里云免费证书 2.项目添加https配置 3.服务器开启https访问 3.1 重新安装OpenSSL 3.2.重新安装Python 上一次已经讲过Linux安装部署Python: Linux安装Python3.10与部署flask项目实战详细记录,今天记录一下Python项目如何支持https访问…...

Kubernetes 离线部署 Spinnaker

离线部署 Spinnaker 离线部署 spinnaker 需要提前准备以下依赖项 halyard 安装工具&#xff1a;该hal命令的apt源地址https://us-apt.pkg.dev/projects/spinnaker-community位于国外halyard boms物料清单&#xff1a;Spinnaker 将其halyard boms配置存储在公共谷歌云存储 ( g…...

TypeScript 学习笔记 第三部分 贪吃蛇游戏

尚硅谷TypeScript教程&#xff08;李立超老师TS新课&#xff09; 1. 创建开发环境 创建工程&#xff0c;使用学习笔记的第二部分安装css部分 npm i -D less less-loader css-loader style-loader对css部分处理&#xff0c;能够运行在低版本浏览器 npm i -D postcss postcss…...

【spring(一)】核心容器总结

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 IOC 配置bean对象&#xff1a; DI 注入bean对象 ①.setter方法注入 ②.构造器注入 Bean的实例化 1.setter方法注入(重点) 2.静态工厂&#xff08;了解&#xff09; 3.实例工厂&#xff08;了解&#xff0…...

易点易动固定资产管理系统:实现全面的固定资产采购管理

在现代企业中&#xff0c;固定资产采购管理是一项关键的任务。为了确保企业的正常运营和发展&#xff0c;有效管理和控制固定资产采购过程至关重要。易点易动固定资产管理系统为企业提供了一种全面的解决方案&#xff0c;整合了从采购需求、采购计划、询比价、采购合同到采购执…...

力扣:178. 分数排名(Python3)

题目&#xff1a; 表: Scores ---------------------- | Column Name | Type | ---------------------- | id | int | | score | decimal | ---------------------- 在 SQL 中&#xff0c;id 是该表的主键。 该表的每一行都包含了一场比赛的分数。Score …...

raid磁盘阵列

在单机时代&#xff0c;采用单块磁盘进行数据存储和读写的方式&#xff0c;由于寻址和读写的时间消耗&#xff0c;导致I/O性能非常低&#xff0c;且存储容量还会受到限制。另外&#xff0c;单块磁盘极其容易出现物理故障&#xff0c;经常导致数据的丢失。此时&#xff0c;RAID技…...

SpringBoot学习笔记-实现微服务:匹配系统(上)

笔记内容转载自 AcWing 的 SpringBoot 框架课讲义&#xff0c;课程链接&#xff1a;AcWing SpringBoot 框架课。 CONTENTS 1. 配置WebSocket2. 前后端WebSocket通信2.1 WS通信的建立2.2 加入JWT验证 3. 前后端匹配业务3.1 实现前端页面3.2 实现前后端交互逻辑3.3 同步游戏地图 …...

重磅!全球首个“绿色黑灯工厂”落户中国,竟然是这家企业……

作者&#xff1a;叶蓁 “52”、“白加黑”、“无人看守作业”&#xff0c;这是九牧“绿色黑灯工厂”的几大关键词。 九牧绿色黑灯工厂不仅是单体产量最大的工厂&#xff0c;也是全球首个入选的“绿色黑灯工厂”。 11月17日&#xff0c;中国节能协会授予九牧5G智能马桶工厂全球…...

go语言学习-异常处理

1、异常场景 网络故障硬件故障组件故障输入错误逻辑错误链路调度错误 2、异常处理方式 # python或者java异常处理 try 可能出现的错误 catch对错误进行处理 xxx,err : 代码 if err ! nil {代码出现错误&#xff0c;需要做处理 }3、自定义错误 有两种方法&#xff1a;1、通过…...

如何使用 JavaScript 实现图片上传并转换为 LaTeX 公式

在本教程中&#xff0c;我们将学习如何使用 JavaScript 创建一个上传图片的功能&#xff0c;并将所选图片转换为 LaTeX 公式。我们将使用 FileReader 对象来读取图片并将其转换为 Base64 格式&#xff0c;然后利用 img2latex API 将其转换为 LaTeX 公式。 1. HTML 结构 首先&…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...