利用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属性来控制：
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接口的并发请求和顺序，并轻松处理请求状态。
