js给同一组件同一请求的调用加锁

我开发的一个页面，同时多次使用了同一个组件，但是这个组件一加载就会调用同一个方法，最终同时调用同一接口。

但是我们后端对于同一接口的调用频率进行了限制，不允许短时间内重复提交，需要在一个时间间隔后提交才能请求成功。

原代码为：

onMounted(() => {
  const code = item.value.code;
  ocrServerConfigDetail(code);
});

const ocrServerConfigDetail = (code) => {
  return new Promise((resolve, reject) => {
    TaskApi.ocrServerConfigDetail({
      code,
    })
      .then((res) => {
        const data = res.data;
        if (data.code === 200) {
          if (data.data) {
            item.value.paramList = data.data.paramList;
          }
        } else {
          Toast.fail(data.message);
          reject();
        }
      })
      .catch((error) => {
        if (error.message !== "") {
          Toast.fail(error.message);
        }
        reject(error);
      });
  });
};

我采用加锁方式解决这个问题，使用sessionStorage进行全局的锁存储。

新代码为：

onMounted(() => {
  const code = item.value.code;
  ocrServerConfigDetailAddLock(code);
});

const ocrServerConfigDetailAddLock = (code) => {
  if (sessionStorage.isOCRLocked == 1) {
    setTimeout(() => {
      ocrServerConfigDetailAddLock(code);
    }, 600);
  } else {
    if (code) {
      ocrServerConfigDetail(code);
      console.log(code);
    }
  }
};

const ocrServerConfigDetail = (code) => {
  sessionStorage.isOCRLocked = 1;
  return new Promise((resolve, reject) => {
    TaskApi.ocrServerConfigDetail({
      code,
    })
      .then((res) => {
        const data = res.data;
        if (data.code === 200) {
          if (data.data) {
            item.value.paramList = data.data.paramList;
          }
        } else {
          Toast.fail(data.message);
          reject();
        }
      })
      .catch((error) => {
        if (error.message !== "") {
          Toast.fail(error.message);
        }
        reject(error);
      })
      .finally(() => {
        sessionStorage.isOCRLocked = 0;
      });
  });
};