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,实现对http请求封装。 支持loading状态判断请求进度,支持获取请求正确和错误结果。 二、技术方案 use request hook export const useRequest (options) > {// 请求参数const [url, ...init] options;// 请求返回的数…...
【LeetCode】挑战100天 Day13(热题+面试经典150题)
【LeetCode】挑战100天 Day13(热题面试经典150题) 一、LeetCode介绍二、LeetCode 热题 HOT 100-152.1 题目2.2 题解 三、面试经典 150 题-153.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站,提供各种算法和数据结构的题目&…...
Android 11.0 SystemUI 去掉状态栏wifi流量上下行图标功能实现
1.概述 在11.0系统定制rom开发中,在关于systemui的定制功能总,在SystemUI 状态栏上显示时钟,电池电量 wifi图标,在显示wifi图标时,网络实时更新时,但是会时不时显示上下行图标 显得很不美观,客户需求要求不显示上下行图标,所以需要去掉上下行图标功能,接下来实现相关功能…...
掌握Net User命令:轻松创建、修改、删除和查看本地用户帐户
net user 命令用于管理本地用户帐户。它可以用于创建、修改、删除用户帐户,以及查看用户帐户的信息 在Windows操作系统中,Net User命令是一个强大的工具,它允许管理员创建、修改、删除和查看本地用户帐户。无论你是IT专业人士还是普通用户&am…...
性能优化中使用Profiler进行页面卡顿的排查及解决方式
文章目录 一、前言二、页面卡顿的排查方式1、耗时操作的监控2、页面卡顿的监控 三、参考链接 一、前言 程序的优化在做过线上bug处理,布局层级优化,项目依赖库版本更新,重复库合并,删除未使用的资源,删除冗余的库&…...
深入了解Java8新特性-日期时间API_LocalDate类
阅读建议 嗨,伙计!刷到这篇文章咱们就是有缘人,在阅读这篇文章前我有一些建议: 本篇文章大概12000多字,预计阅读时间长需要10分钟。本篇文章的实战性、理论性较强,是一篇质量分数较高的技术干货文章&…...
PyTorch基本操作和工作流程
1. PyTorch基础 张量(Tensors): 学习 PyTorch 中表示数据的基本单元。了解如何创建、操作和使用张量。 自动微分(Autograd): 了解 PyTorch 的自动微分机制,这是训练神经网络的核心。 模型定义…...
Android开发从0开始(ContentProvider与数据)
内容提供者:ContentProvider 为App存取内部数据提供外部接口,让不同应用共享数据。 ①在配置里AndroidManifest.xml <provider android:name".UserInfoProvider" android:authorities"com.example.chapter07_server.provider.U…...
STM32_6(TIM)
TIM定时器(第一部分) TIM(Timer)定时器定时器可以对输入的时钟进行计数,并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元,在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 安装工具:该hal命令的apt源地址https://us-apt.pkg.dev/projects/spinnaker-community位于国外halyard boms物料清单:Spinnaker 将其halyard boms配置存储在公共谷歌云存储 ( g…...
TypeScript 学习笔记 第三部分 贪吃蛇游戏
尚硅谷TypeScript教程(李立超老师TS新课) 1. 创建开发环境 创建工程,使用学习笔记的第二部分安装css部分 npm i -D less less-loader css-loader style-loader对css部分处理,能够运行在低版本浏览器 npm i -D postcss postcss…...
【spring(一)】核心容器总结
🌈键盘敲烂,年薪30万🌈 目录 IOC 配置bean对象: DI 注入bean对象 ①.setter方法注入 ②.构造器注入 Bean的实例化 1.setter方法注入(重点) 2.静态工厂(了解) 3.实例工厂(了解࿰…...
易点易动固定资产管理系统:实现全面的固定资产采购管理
在现代企业中,固定资产采购管理是一项关键的任务。为了确保企业的正常运营和发展,有效管理和控制固定资产采购过程至关重要。易点易动固定资产管理系统为企业提供了一种全面的解决方案,整合了从采购需求、采购计划、询比价、采购合同到采购执…...
力扣:178. 分数排名(Python3)
题目: 表: Scores ---------------------- | Column Name | Type | ---------------------- | id | int | | score | decimal | ---------------------- 在 SQL 中,id 是该表的主键。 该表的每一行都包含了一场比赛的分数。Score …...
raid磁盘阵列
在单机时代,采用单块磁盘进行数据存储和读写的方式,由于寻址和读写的时间消耗,导致I/O性能非常低,且存储容量还会受到限制。另外,单块磁盘极其容易出现物理故障,经常导致数据的丢失。此时,RAID技…...
SpringBoot学习笔记-实现微服务:匹配系统(上)
笔记内容转载自 AcWing 的 SpringBoot 框架课讲义,课程链接:AcWing SpringBoot 框架课。 CONTENTS 1. 配置WebSocket2. 前后端WebSocket通信2.1 WS通信的建立2.2 加入JWT验证 3. 前后端匹配业务3.1 实现前端页面3.2 实现前后端交互逻辑3.3 同步游戏地图 …...
重磅!全球首个“绿色黑灯工厂”落户中国,竟然是这家企业……
作者:叶蓁 “52”、“白加黑”、“无人看守作业”,这是九牧“绿色黑灯工厂”的几大关键词。 九牧绿色黑灯工厂不仅是单体产量最大的工厂,也是全球首个入选的“绿色黑灯工厂”。 11月17日,中国节能协会授予九牧5G智能马桶工厂全球…...
go语言学习-异常处理
1、异常场景 网络故障硬件故障组件故障输入错误逻辑错误链路调度错误 2、异常处理方式 # python或者java异常处理 try 可能出现的错误 catch对错误进行处理 xxx,err : 代码 if err ! nil {代码出现错误,需要做处理 }3、自定义错误 有两种方法:1、通过…...
如何使用 JavaScript 实现图片上传并转换为 LaTeX 公式
在本教程中,我们将学习如何使用 JavaScript 创建一个上传图片的功能,并将所选图片转换为 LaTeX 公式。我们将使用 FileReader 对象来读取图片并将其转换为 Base64 格式,然后利用 img2latex API 将其转换为 LaTeX 公式。 1. HTML 结构 首先&…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
【自然语言处理】大模型时代的数据标注(主动学习)
文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构D 实验设计E 个人总结 A 论文出处 论文题目:FreeAL: Towards Human-Free Active Learning in the Era of Large Language Models发表情况:2023-EMNLP作者单位:浙江大…...
项目研究:使用 LangGraph 构建智能客服代理
概述 本教程展示了如何使用 LangGraph 构建一个智能客服代理。LangGraph 是一个强大的工具,可用于构建复杂的语言模型工作流。该代理可以自动分类用户问题、分析情绪,并根据需要生成回应或升级处理。 背景动机 在当今节奏飞快的商业环境中,…...
论文笔记:Large Language Models for Next Point-of-Interest Recommendation
SIGIR 2024 1 intro 传统的基于数值的POI推荐方法在处理上下文信息时存在两个主要限制 需要将异构的LBSN数据转换为数字,这可能导致上下文信息的固有含义丢失仅依赖于统计和人为设计来理解上下文信息,缺乏对上下文信息提供的语义概念的理解 ——>使用…...
