vue 中多个相同组件重复请求的问题_vue 同一个组件多次复用

一个页面中如果多次调用同一个组件的话，组件中请求多个接口，那么就会导致一上来就会一次性请求多个重复的接口，以下是解决方案

import { listDept } from "@/api/system/dept";
import { roleSelect } from "@/api/system/role";
import { formList as formSelect } from "@/api/statisticalConfig/formManage";
import { validatenull } from "@/utils/ruoyi";

let cache = {};
let count = 0;

/**
 * 睡眠一段时间
 * @param {Number} ms 延迟时间，单位毫秒
 * @returns {Promise<void>}
 */
async function delay(ms = 200) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export async function getAllData(params) {
  try {
    let id = localStorage.getItem("oldBusinessTypeId");
    if (!validatenull(cache) && id == params.businessTypeId) {
      return cache;
    }

    if (count++) {
      // 如果有计数说明自己不是第 1 个，就等。注意这里判断的是加之前的 count
      // 循环里最好再加个超时判断
      while (!cache) {
        await delay();
      }
    } else {
      // 是第 1 个就去请求
      // 如果这里有可能会抛异常，抛异常也不要漏了 count--
      const res1 = await listDept(); //部门列表
      const res2 = await roleSelect(); //角色列表
      const res3 = await formSelect(params); //表单数据

      cache = {
        deptList: res1.data,
        roleList: res2.data,
        formList: res3.data,
      };
      if (!validatenull(cache.formList)) {
        let oldBusinessTypeId = cache.formList[0].businessTypeId;
        localStorage.setItem("oldBusinessTypeId", oldBusinessTypeId);
      }
    }
    count--; // 记得减回去，方便以后如果要刷新 cache 的时候用
    return cache;
  } catch (error) {
    console.log("获取数据出错", error);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54