多次重复请求接口优化方案

本文主要是介绍多次重复请求接口优化方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

多次重复请求接口优化方案

原因

在项目公共组件封装中遇到了这个问题，原因是在这个公共组件中onMounted()调用了一个接口，如果这个组件在其他地方复用就会调一次方法，刚开始没注意这个问题，直到一个页面多次用到这个组件了，一打开这个页面三四个同样的接口！后端小伙伴坐不住了，优化！优化！

过程

一开始想不在onMounted()里调用了，触发事件再调用接口，这样什么时候触发就什么时候调接口获取数据得了，但是很快就pass了，这次出现了一个问题，有延迟，触发事件后，还是需要等待一下，产品那边过不了关。所以最好的方法还是在加载页面的时候就直接把数据加载出来，这怎么处理呢？

突然想到了之前常见的解决多次请求的案例：防抖和节流

茅厕顿开！虽然实际情况不同，但是逻辑有些相似，直接上代码

额外创建getData.ts文件（这里技术栈采用的vue3+ts），

let data = [] as Record<string, any>;
let count = 0;
//用来实现延迟效果
async function delay(ms = 200) {return new Promise((resolve) => setTimeout(resolve, ms));
}
export async function useGetData() {// 调用接口，获取数据const getApiData = async () => {const result = await api();data = [result?.data];};//如果判断数据存在直接返回if (data && data?.length > 0) {return { data };}if (count++) {// 如果有计数说明自己不是第 1 个，就等待while (!data || data?.length === 0) {await delay();}} else {// 是第 1 个就去请求await getApiData();}count--;return { data };
}

这段代码实现的效果就是当短时间内调用时，只会调用一次接口。

整体逻辑就是第一次调用时，count为0，count加1，执行else里的内容，就会执行getApiData（）方法，但是加入了await，这样就会等待接口完成后再执行下一步。

而再第二次调用这个方法时，count已经为1，这个时候if判断成功，进入while进行delay()等待，这个时候其实涉及到事件的循环机制了，微任务执行完毕后才能执行下一个微任务，await getApiData（）就是一个异步操作，await后面的函数执行完毕时，await会产生一个微任务，加入队列，await delay()也是。所以当数据获取成功后，执行delay()然后跳出while循环，然后最后return {data}，其实最终目的都是return {data}。

后面如何再次获取数据时，这个时候也不用经过再判断count了，直接根据之前已经存在过的数据进行返回。