前端的异步请求,添加锁

起因

element-ui中,及联选择器异步获取下拉框,存在重复申请

element-ui j及联选择器配置

解决办法

pinia 缓存和 添加请求锁

pinia中

const locks = new Map();

/* 添加锁 */
async function waitForLock(key) {
  if (locks.has(key)) {
    return new Promise((resolve) => {
      locks.get(key).push(resolve);
    });
  } else {
    locks.set(key, []);
  }
}

/* 释放锁 */
function releaseLock(key) {
  const lock = locks.get(key);
  if (lock && lock.length > 0) {
    lock.shift()();
  } else {
    locks.delete(key);
  }
}

const useFieldStore = defineStore(
  "field",
  {
    state: () => ({
      list: new Set(),
      keep: {},
    }),
    actions: {
      getField(params) {
        return new Promise(async (resolve, reject) => {
          const key = JSON.stringify(params);
          // 读取缓存
          if (this.list.has(key) && this.keep[key]) {
            resolve(this.keep[key]);
            return;
          }

          // 等待锁
          await waitForLock(key);

          // 再次读取缓存,因为可能已经被其他请求获取到了
          if (this.list.has(key) && this.keep[key]) {
            resolve(this.keep[key]);
            releaseLock(key);
            return;
          }

          const { data } = await findIndicatorOptions(params);
          this.list.add(key);
          this.keep[key] = data;
          releaseLock(key);
          resolve(data);
        });
      }
    }
  });
posted @ 2023-04-18 10:47  Cavan-lee  阅读(329)  评论(0)    收藏  举报