useRequest | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天。

useRequest 是一个强大的异步数据管理的 Hooks，它通过插件式组织代码，可实现包括自动请求/手动请求 ，轮询，防抖，节流，屏幕聚焦重新请求，错误重试，loading delay，SWR(stale-while-revalidate)，缓存在内的多种功能。

基本使用

useRequest 的第一个参数是一个异步函数，在组件初次加载时，会自动触发该函数执行。同时自动管理该异步函数的 loading , data , error 等状态。

const { data, error, loading } = useRequest(getUsername);

第二个参数为各项配置。如果设置了 manual 为 true ，则 useRequest 不会默认执行，需要通过 run 来触发执行。

  import type { FC, ReactElement } from 'react'
  import { useRequest } from 'umi';
  import { Button } from 'antd';

 const test: FC = (): ReactElement => {
    const { data, loading , run } = useRequest(changeUsername, {
      manual: true,
    })

    return (
       <Button loading={loading} type='primary' onClick={() => run()}>手动触发</Button>
    );
  };

  export default test;

生命周期

useRequest 提供了以下几个生命周期配置项，供你在异步函数的不同阶段做一些处理。

• onBefore：请求之前触发
• onSuccess：请求成功触发
• onError：请求失败触发
• onFinally：请求完成触发

  import type { FC, ReactElement } from 'react'
  import { useRequest } from 'umi';
  import { Button } from 'antd';

 const test: FC = (): ReactElement => {
    const { data, loading , run } = useRequest(changeUsername, {
      manual: true,
      onBefore: () => {},
      onSuccess: (res) => { console.log(res) },
      onError: () => {},
      onFinally: () => {}
    })

    return (
       <Button loading={loading} type='primary' onClick={() => run()}>手动触发</Button>
    );
  };

  export default test;

取消请求

如果需要取消正在进行的请求，可以使用 useRequest 提供的 cancel 函数。 另外， useRequest 会在以下时机自动取消当前请求：

• 组件卸载时，取消正在进行的请求
• 竞态取消，当上一次请求还没返回时，又发起了下一次请求，则会取消上一次请求

  import type { FC, ReactElement } from 'react'
  import { useRequest } from 'umi';
  import { Button } from 'antd';

 const test: FC = (): ReactElement => {
    const { data, loading , run, cancel } = useRequest(changeUsername, {
      manual: true,
    })

    return (
       <Button loading={loading} type='primary' onClick={() => cancel()}>取消请求</Button>
    );
  };

  export default test;

另外，使用 useRequest 提供的 refresh 和 refreshAsync 方法，可以利用上一次的参数，重新发起请求。 useRequest 提供的 mutate, 还支持立即修改 useRequest 返回的 data 参数。

详细教程可访问官网查看。

参考链接：

快速上手 - ahooks 3.0