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.pollingWhenHidden=false ，在屏幕不可见时，暂时暂停定时任务。
• 通过 run / cancel 来 开启/停止 轮询。
• 在 options.manual=true 时，需要第一次执行 run 后，才开始轮询。

const { data, loading, run, cancel } = useRequest(getUsername, {
  pollingInterval: 1000,//轮询的时间
  pollingWhenHidden: false//在屏幕不可见时，暂停任务
});
<Spin spinning={loading}>{/*控制加载图标*/}
        <p>Username: {data}</p>{/*data是请求的结果*/}
</Spin>
<Button.Group>
  <Button onClick={run}>start</Button>{/*手动触发请求*/}
  <Button onClick={cancel}>stop</Button>{/*手动取消请求*/}
</Button.Group>

4】并行请求

通过 options.fetchKey ，可以将请求进行分类，每一类的请求都有独立的状态，你可以在 fetches 中找到所有的请求。

const { run, fetches } = useRequest(deleteUser, {
  manual: true,
  fetchKey: id => id,//通过run中传入的params来绑定id
  onSuccess: (result, params) => {
    if (result.success) {//回调执行时获得的结果
      console.log(params[0])
    }
  }
});

const users = [{ id: '1', username: 'A' }, { id: '2', username: 'B' }, { id: '3', username: 'C' }];
<ul>
  {users.map((user => (
    <li key={user.id} style={
   { marginTop: 8 }}>
      <Button loading={fetches[user.id]?.loading} onClick={() => { run(user.id) }}>delete {user.username}</Button>
    </li>
  )))}
</ul>

5】防抖

通过设置 options.debounceInterval ，则进入防抖模式。此时如果频繁触发 run ，则会以防抖策略进行请求。

const { data, loading, run, cancel } = useRequest(getEmail, {
  debounceInterval: 500,//防抖时长为500ms
  manual: true//手动触发开
});
<Select
  showSearch
  placeholder="Select Emails"
  filterOption={false}
  onSearch={run}//输入变化执行run方法去自动携参请求
  onBlur={cancel}//失焦取消请求（清理clearTimer）
  loading={loading}
  style={
   { width: 300 }}
  >
  {data && data.map(i => <Option key={i}>{i}</Option>)}
  {/*data为请求的结果，此时用于视图展示出来*/}
</Select>

6】节流

通过设置 options.throttleInterval ，则进入节流模式。此时如果频繁触发 run ，则会以节流策略进行请求。（道理和防抖同理）

const { data, loading, run, cancel } = useRequest(getEmail, {
  throttleInterval: 500,
  manual: true
});

7】缓存 & SWR

swr：stale-while-revalidate

如果设置了 options.cacheKey ， useRequest 会将当前请求结束数据缓存起来。下次组件初始化时，如果有缓存数据，我们会优先返回缓存数据，然后在背后发送新请求，也就是 SWR 的能力。

  const { data, loading } = useRequest(getArticle, {
    cacheKey: 'article'//请求唯一标识。如果设置了 cacheKey，我们会启用缓存机制
  });

• 我们会缓存每次请求的 data , error , params , loading
• 在缓存机制下，同样的key的请求我们会先返回缓存中的数据，同时会在背后发送新的请求，待新数据返回后，重新触发数据更新

8】预加载

也是通过设置options.cacheKey进行设置，我们同时设置manual:true，手动触发进行提前加载。

const { run } = useRequest(getArticle, {
  cacheKey: 'article',
  manual: true
});

<Button onMouseEnter={() => run()}>加载</Button>

9】屏幕聚焦重新请求

如果你设置了 options.refreshOnWindowFocus = true ，则在浏览器窗口 refocus 和 revisible 时，会重新发起请求。你可以通过设置 options.focusTimespan 来设置请求间隔，默认为 5000ms 。

const { data, loading } = useRequest(getUsername, {
  refreshOnWindowFocus: true,
  focusTimespan: 5000
})

10】突变（请求的结果立即修改计算）

你可以通过 mutate ，直接修改 data 。 mutate 函数参数可以为 newData 或 (oldData)=> newData

const { data, mutate } = useRequest(getUsername);
console.log(data)//异步请求的结果
mutate('res')
console.log(data)//res

11】loading Delay

通过设置 options.loadingDelay ，可以延迟 loading 变成 true 的时间，有效防止闪烁。

const { data, run, loading } = useRequest(getCurrentTime, {
  loadingDelay: 200
});

12】refreshDeps

当某些 state 变化时，我们需要重新执行异步请求，一般我们会这样写代码：

const [userId, setUserId] = useState('1');
const { data, run, loading } = useRequest(()=> getUserSchool(userId));
useEffect(() => {
  run();
}, [userId]);

refreshDeps 是一个语法糖，让你更方便的实现上面的功能。当 refreshDeps 变化时，会使用之前的 params 重新执行 service。我们只需要在useRequest中配置一下refreshDeps选项即可。

const [userId, setUserId] = useState('1');
const {
     data, loading } = useRequest(() => getUserSchool(userId), {
    
  refreshDeps: [userId]
});

useBoolean

基本使用：默认切换布尔值状态，也可以接收一个参数作为新的值

类型说明

const {state,toggle,setTrue,setFalse}=useBoolean(defaultValue?:boolean)

const { state, toggle, setTrue, setFalse } = useBoolean(true);
//其中toggle、setTrue、setFalse都是函数方法
<div>
  <p>
    Effects：
    <Switch checked={state} onChange={toggle} />
  </p>
  <p>
    <Button type="default" onClick={() => toggle()}>
      Toggle
    </Button>
    <Button type="danger" onClick={setFalse} style={
   { margin: '0 16px' }}>
      Set false
    </Button>
    <Button type="primary" onClick={setTrue}>
      Set true
    </Button>
  </p>
</div>