js給同一元件同一請求的呼叫加鎖

罗毅豪發表於2024-11-18
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;
      });
  });
};

相關文章