umi插件useRequest基本使用

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

Ara_tsubomi

7450人浏览 · 2022-10-25 11:29:48

Ara_tsubomi · 2022-10-25 11:29:48 发布

引用方式及优点

基本使用

写在最后

@umijs/plugin-request 基于 umi-request 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。umi中是默认启用的。集成了两边的功能，发请求真的方便了超多！

引用方式及优点

1.可以直接从umi中引用useRequest ——> import { useRequest } from 'umi';

2.主要方便的两点是：

按照接口请求规范内置了 formatResult: res => res?.data ，所以返回的data是直接可以用的，不用再解构一层了。（当然如果本身后端返回的数据结构不是在data字段中，也可以自己配置 formatResult 来覆盖内置的这个逻辑）。
按照接口错误规范统一了错误处理逻辑。接口符合规范的前提下（当然不符合规范的话，也可以通过运行时配置项进行自定义，可以查看umi官网的request插件的说明），已经内置了showType 和 errorMessage 来做统一的错误提示，同时抛出一个异常，这节省了很多对于请求错误后的处理代码。并且，如果某个接口不想让其抛出异常及错误提示的话，可以在对应接口的request中单独配置skipErrorHandler: true来跳过错误处理。

基本使用

由于一些错误配置和运行时配置项等，umi官网中已经说的很清晰了，就不再重复了，就直接说useRequest的基本使用吧。

默认情况下，useRequest 第一个参数是一个异步函数（一般就是要发的异步请求），在组件初始化时，会自动执行该异步函数。同时自动管理该异步函数的 loading , data , error 等状态。
```
const { data, error, loading } = useRequest(getUsername);
然后在react的jsx、tsx文件中，就可以直接使用data（返回的数据）和loading（值为true或false，很方便用来做页面的加载效果）。
```

当然，也可以不让它一开始就自动执行，配置manual: true可以配合run进行手动触发;

const {run, runAsync，loading } = useRequest(changeUsername, {
  manual: true
});
/*配置了manual: true后，需要在合适的时机，通过run来手动触发这个异步函数*/
/*除了run，还有一个异步的runAsync，也可以触发执行，区别是：
run 是一个普通的同步函数，会自动捕获异常，可以通过 options.onError 来处理异常时的行为。
runAsync 是一个返回 Promise 的异步函数，如果使用 runAsync 来调用，需要自己捕获异常。*/

生命周期配置项：useRequest 提供了以下几个生命周期配置项，供你在异步函数的不同阶段做一些处理。   - `onBefore`：请求之前触发
   - `onSuccess`：请求成功触发
   - `onError`：请求失败触发
   - `onFinally`：请求完成触发
```
const {  data, error, loading } = useRequest(changeUsername, {
  onSuccess: (result, params) => {
     setState('');
     message.success(`请求成功发送`);
   },
  onError: (error) => {
     message.error(error.message);
   },
});
```
还有对于请求参数的配置：有时请求的参数是不确定的，当手动触发的时候，可以通过run来传参，比如触发了 run(1, 2, 3)，则 params 为[1, 2, 3]；但是如果设置了manual为false，则首次调用 service 的参数可以通过 options.defaultParams 来设置。
```
const {  data, error, loading } = useRequest(changeUsername, {
  manual: false,
  defaultParams: ['1']
});
```

小结及其他常用参数：

const {
  loading: boolean,
  data?: TData,
  error?: Error,
  params: TParams || [],
  run: (...params: TParams) => void,  /*manual为true时手动触发*/
  runAsync: (...params: TParams) => Promise<TData>,
  refresh: () => void,  /*重新发这个请求，用于数据有修改后获取最新数据进行页面渲染*/
  refreshAsync: () => Promise<TData>,
  mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
  /*立即修改 useRequest 返回的 data 参数，用法与 React.setState 一致*/
  cancel: () => void,  /*不会取消 promise 的执行，用于忽略当前 promise 返回的数据和错误*/
} = useRequest<TData, TParams>(
  service: (...args: TParams) => Promise<TData>,
  {
    manual?: boolean,
    defaultParams?: TParams,
    onBefore?: (params: TParams) => void,
    onSuccess?: (data: TData, params: TParams) => void,
    onError?: (e: Error, params: TParams) => void,
    onFinally?: (params: TParams, data?: TData, e?: Error) => void,
  }
);

高阶用法总结：

const { loading, data,cancel,run } = useRequest(getUsername, {
/*1.延迟loading变为true的时间*/  
loadingDelay: 300   //延迟 loading 变成 true 的时间，有效防止闪烁。
/*2.轮询*/  
pollingInterval: 1000,   //进入轮询模式，会每隔1000ms 请求一次 getUsername。可以通过 cancel 来停止轮询，如果设置 options.manual = true，则初始化不会启动轮询，需要通过 run/runAsync 来启动轮询。  
pollingWhenHidden: false,   //在页面隐藏时，是否继续轮询。如果设置为 false，在页面隐藏时会暂时停止轮询，页面重新显示时继续上次轮询。  
pollingErrorRetryCount: 3,   //轮询错误重试次数。如果设置为 -1，则无限次
/*3.依赖刷新*/  
refreshDeps: [userId],   //依赖数组，当数组内容变化后，发起请求。同 useEffect 的第二个参数。
/*4.屏幕聚焦重新请求*/  
refreshOnWindowFocus: true, //在屏幕重新获取焦点或重新显示时，重新发起请求. 
focusTimespan:3000,  //重新请求间隔为3000毫秒
/*5.防抖*/  
debounceWait: 300,//进入防抖模式，频繁触发 run，只会在最后一次触发结束后等待 300ms 执行。
/*6.节流*/  
throttleWait: 300,//进入节流模式，频繁触发 run，只会每隔 300ms 执行一次。
/*7.缓存 & SWR*/  
cacheKey: 'cacheKey-demo',//在组件第二次加载时，会优先返回缓存的内容，然后在背后重新发起请求。同一个 cacheKey 的内容，在全局是共享的  
staleTime: 5000,//指定数据新鲜时间，在这个时间内，不会重新发起请求。  
   //清除缓存：     
   import { clearCache } from 'ahooks';     
   clearCache(cacheKey?: string | string[]);     
   支持清空单个缓存，或一组缓存。如果 cacheKey 为空，则清空所有缓存数据
});