利用ahooks的useRequest实现高效的多接口并发请求与顺序控制

在页面加载时，需要同时调用多个API接口获取数据的情况很常见。ahooks的useRequest钩子函数提供了一种简洁且高效的方式来管理这些并发请求，并灵活控制请求的执行顺序。

并发请求

useRequest默认情况下会并发执行传入的多个请求函数。例如：

import { useRequest } from 'ahooks';

const fetch1 = () => {}; // 模拟接口请求1
const fetch2 = () => {}; // 模拟接口请求2

const { data: data1, loading: loading1, error: error1 } = useRequest(fetch1);
const { data: data2, loading: loading2, error: error2 } = useRequest(fetch2);

这段代码会同时发起fetch1和fetch2两个接口请求。

顺序请求控制

如果接口请求之间存在依赖关系，需要按照特定顺序执行，则可以通过options参数中的manual属性来控制：

MuleRun

一款AI办公效率工具，主要用于全球首个AI Agent交易平台，适合需要提升相关任务效率的用户。

下载

useRequest(fetch1, { manual: true });
useRequest(fetch2, { manual: true });

将manual设置为true后，需要手动调用run()方法来触发请求：

const ref1 = useRef(true);
const ref2 = useRef(true);

if (ref1.current) {
  useRequest(fetch1).run();
  ref1.current = false;
}

if (ref2.current && !loading1 && !error1) { // 确保fetch1请求完成
  useRequest(fetch2).run();
  ref2.current = false;
}

这样就保证了fetch2只有在fetch1成功完成后才会执行。

统一管理状态

useRequest返回的对象包含data、loading和error三个属性，方便统一管理多个请求的状态：

const { data: data1, loading: loading1, error: error1 } = useRequest(fetch1);
const { data: data2, loading: loading2, error: error2 } = useRequest(fetch2);

const loading = loading1 || loading2;
const error = error1 || error2;

if (!loading && !error) {
  // 所有请求都成功完成
  console.log('data1:', data1);
  console.log('data2:', data2);
}

通过以上方法，您可以使用useRequest高效地管理多个API接口的并发请求和顺序，并轻松处理请求状态。