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

原因

在项目公共组件封装中遇到了这个问题,原因是在这个公共组件中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了,直接根据之前已经存在过的数据进行返回。

总结

其实总的逻辑还是判断上一次有没有数据,但是加入了接口之后,为了避免请求数据延迟问题,利用事件循环机制的原理进行了一定的处理。