实现多次重复请求接口优化

实现重复请求接口优化

原因

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

过程

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

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

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

额外创建getData.ts文件(这里技术栈采用的vue3+ts),

javascript 复制代码
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了,直接根据之前已经存在过的数据进行返回。

总结

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

相关推荐
Asort1 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney19 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥21 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare22 分钟前
选择文件夹路径
前端
艾小码23 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月24 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁27 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅27 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸29 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端