自己动手一步步实现一个简易版 umi 的 useRequest

zoe_ya

已于 2023-08-27 11:05:59 修改

阅读量946

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端 react.js typescript antd

于 2023-06-07 13:29:30 首次发布

本文链接：https://blog.youkuaiyun.com/Constantiny/article/details/131085723

前端专栏收录该内容

29 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何自己动手实现一个简单的 useRequest Hook，它适用于React项目的异步数据管理。内容涵盖useRequest的基本功能，如自动/手动请求、轮询、防抖、节流等，并提供了包含防抖节流功能的自定义Hook的实现示例。

简介

在这里插入图片描述

useRequest 是一个强大的异步数据管理的 Hooks，React 项目中的网络请求场景使用 useRequest 就够了。

useRequest 通过插件式组织代码，核心代码极其简单，并且可以很方便的扩展出更高级的功能。目前已有能力包括：

自动请求/手动请求
轮询
防抖
节流
屏幕聚焦重新请求
错误重试
loading delay
SWR(stale-while-revalidate) 缓存

具体看官方文档

https://ahooks.js.org/zh-CN/hooks/use-request/index

手写 useRequest

参考GPT 感觉还不错写的
下面是一个简单的 useRequest 自定义 Hook，包含 run 方法：

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zoe_ya

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

代码题: 实现 ahooks 中的 useRequest 函数, 内部可以使用 axios 或者 fetch

weixin_43850639的博客

08-31

634

是一个常用的自定义 Hook，用于处理数据请求。它可以简化组件中的请求逻辑，使组件更纯净并重用请求逻辑。

umi插件useRequest基本使用

热门推荐

weixin_62192841的博客

10-25

1万+

umi默认开启了插件@umijs/plugin-request，内置了useRequest这个超级好用的hook，本文介绍了优点及基本使用方法，包含了大部分对于useRequest的使用场景，来找找有没有能解决你的问题的地方吧！

参与评论您还未登录，请先登录后发表或查看评论

umi useRequest

qq_45223203的博客

08-30

2987

import { useRequest } from 'ahooks'; import React, { useState } from 'react'; const userSchool = (id: string) => { switch (id) { case '1': return 'Tsinghua University'; case '2': return 'Beijing University'; case '3': re.

Umi Hooks------------useRequest的使用

qq_48718857的博客

01-05

5633

useRequest 作用：管理异步数据请求普通请求 const { data, run, loading } = useRequest(getUsername, {manual: true}) run : 手动触发 data : 返回的数据 loading ：加载状态 manual：直接更新data cancel ：取消当前请求，如果有轮询，停止轮询 const { data, loading, run, cancel } = useRequest(getUsername, { poll

手写中实现并学习ahooks——useRequest

量子前端的博客

03-08

1904

最近业务没有之前紧张了，也是消失了一段时间，也总结了一些之前业务上的问题。和同事沟通也是发现普通的asyncawait封装api在复杂业务场景下针对于请求的业务逻辑比较多，也是推荐我去学习一波ahooks，由于问题起源于请求，因此作者也是直接从useRequest开始看起。附。

umi-request & useRequest 源码分析及业务实践

小王的技术库

08-18

1681

文章详细介绍了以及源码以及核心流程，以及怎样很好的整合在日常的小程序以及后台的业务逻辑中，) 以下是一个接) 支持 debouce，支持生命周期 onBefore，onError, onSuccess, onFinally 集成了 data，error，loading 支持 manual？或手动执行：初始化自动执。...

umi-next:umi的下一个版本。（正在开发中）

03-08

umi（v3开发版） :rice_ball: 可插拔的企业级React应用程序框架。请考虑关注该项目的作者，并考虑为该项目以显示您的 :red_heart: 和支持。入门去做社区 Github问题钉钉群微信群执照

一个基于 umi 的移动 React 框架

06-12

【标题】：“一个基于 umi 的移动 React 框架” 在现代Web应用开发领域，React作为一款流行的JavaScript库，已经成为了构建用户界面的首选工具。然而，仅使用React进行大型项目的开发可能会变得复杂，因此出现了...

精选资源

umi-store:Umi3 + DVA + TS + Antd-Mobile 的一个商城模板

05-11

umi project 基于 Umi3 + DVA + TS + Antd-Mobile 的商城模板 Getting Started Install dependencies, $ yarn Start the dev server, $ yarn start 1. 首页： 2. 购物车： 3. 订单列表： 4. 我的页面：

使用umi中的useRequest函数获取返回值中的data为空的问题

woshihedayu的博客

12-30

1407

umi是一个react脚手架，最近有一个功能，需要在组件第一次渲染前请求一次，后面组件重新渲染不需要再次发送请求。要实现这种功能，我决定使用umi里面的一个hook函数，即useRequest。后来经过反复尝试，发现useRequest函数传入的第一个参数必须是一个异步函数，并且这个异步函数的返回值必须是一个包含data属性的对象，否则封装后的响应数据就获取不到。结果发现，categorys值始终为undefined，也就是说，useRequest返回对象的data属性始终为undefined。

React请求类hook useRequest封装思路-ahooks

Asinsd的博客

03-20

2138

对ahooks的useRequest源码解读

深入解读ahooks中的useRequest实现原理

weixin_47588164的博客

09-21

1440

useRequest是ahooks提供的用于管理异步请求的 Hook，解决了 React 中常见的异步操作问题。它不仅可以自动处理请求的状态变化，还提供了多种高级功能，如轮询、节流、错误重试、请求缓存等。useRequest是一个功能丰富且灵活的异步请求管理 Hook，通过源码解读，我们可以看到它的核心逻辑是围绕请求的状态管理展开，并通过多种配置项扩展功能，包括轮询、防抖、节流、缓存等。在实际项目中，useRequest可以大幅简化复杂的异步操作，并提供强大的性能优化支持。

HarmonyOS 5.0.0 或以上：封装 useRequest，统一处理异步请求状态（loading + error + data）

最新发布

Mark_fu博客

05-25

260

在开发中，我们经常会请求接口并处理三个状态：✅ 加载中（loading）✅ 数据（data）❌ 错误（error）我们将封装一个useRequestHook，实现接口调用逻辑的复用。

Vue3 TypeScript 实现一个 useRequest

程序员成长指北

05-30

961

大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群起因自从 Vue3 更新之后，算是投入了比较大的精力写了一个较为完善的Vue3.2 + Vite2 + Pinia + Naive UI的 B 端模版，在做到网络请求这一块的时候，最初使用的是VueRequest的useRequest，但是因为VueRequest的use...

微前端实践-实现React(umi框架)的子系统集成

astonishqft的博客

02-23

4182

问题引入最近在公司遇到了一个需求，别的团队的同事想将他们用 React 编写的工程作为子系统集成到我们已有的系统中，React 工程是基于 umi 框架编写的，我们的主系统是基于 jquery 框架实现的。其实他们本来是已经实现了 React 作为子系统集成到我们的主系统中的，但是他们是借助于 iframe 实现页面嵌入的，后来因为用户体验不佳、存在安全性问题等因素而不得不放弃这种方式的集成了。...

useRequest使用日志

Jidahan的博客

11-30

3306

万变不离其宗，第一步，引入(我使用的umi脚手架) import { useRequest } from '@umijs/hooks'; 第二步，几个方法 // 用法 1 const { data, error, loading } = useRequest('/api/userInfo'); // 用法 2 const { data, error, loading } = useRequest({ url: '/api/changeUsername', method: 'post', });

ahooks的useRequest源码解读

我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。

10-07

607

“ahooks是一套高质量的hooks库，在React开发的过程，能够省下很多冗余代码，提高开发效率”在开启本文 ahooks 之前，首先要先了解一下什么是 React hooksReact hooks 是 React 在 16.8 版本之后推出的新功能，它的出现让函数式组件不再是无状态组件，而是拥有状态以及副作用。举个例子，以前写一个计数器组件，是这样的格式上面的代码，假如用函数的...

【unibest】第8篇 —— 请求篇

weixin_39544145的博客

01-06

1089

本文介绍了多种请求方式，使用都非常简单，最后给出了useRequest和useUpload的源码。希望您收获的不仅是鱼，还有渔。

「已解决」模块““umi“” ““@umijs/max“” 没有导出的成员“useRequest” “request” 问题的所有方法汇总

Constantiny的博客

07-09

7586

使用 Umi 搭建项目时候有的时候会出现这种错误，模块““umi”” ““@umijs/max”” 没有导出的成员“useRequest” “request”。

实践教程：将 umi-request 打造成 Umi 支持的 JS 插件

资源摘要信息:"umi-request-practice是一个实践项目，目的是为了练习如何在umi框架中使用umi-request。这个实践涉及到如何创建一个支持umi的JavaScript插件，所有请求都走POST方法，并且需要统一添加Token、用户信息...