Umi Hooks

useRequest

核心特性：自动请求/手动请求、SWR(stale-while-revalidate)、缓存/预加载、屏幕聚焦重新请求、轮询、防抖、节流、并行请求、loading delay、分页、错误重试、请求超时管理、suspense、加载更多，数据恢复 +滚动位置恢复…

const {data,loading,error,run,cancel}=useRequest(requsetFunc,options)

1】默认请求

在组件初次加载时，自动触发该函数执行，而且useRequest会生产异步返回的状态。

• useRequest(requsetFunc,{})

import { useRequest } from '@umijs/hooks';
import Mock from 'mockjs';
import React from 'react';
function getUsername(): Promise<string> {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(Mock.mock('@name'));
    }, 1000);
  });
}
export default () => {
  const { data, error, loading } = useRequest(getUsername)
  if (error) {
    return <div>failed to load</div>
  }
  if (loading) {
    return <div>loading...</div>
  }
  return <div>Username: {data}</div>
}

2】手动触发

通过设置 options.manual = true , useRequest会返回一个回调函数run，则需要手动传入参数调用 run时才会触发异步请求。（run是useRequset返回的异步请求函数）

const { loading, run }=useRequest(changeUsername,{
  manual:true,
  onSuccess:(result,param) => {//请求之后的回调，获取结果
    //第一个参数用来获取异步结果，第二个参数以数组的形式获取传入的p0和p1
    if (result.success) {
      console.log(param[0],param[1])
      }
  }
});
<button onClick={() => run(p0,p1)}></button>
//此时执行run(p0,p1)，会去执行changeUsername，成功之后执行onSuccess回调方法，

3】轮询

通过设置 options.pollingInterval ，进入轮询模式，定时触发函数执行。

• 通过设置 options.p