js給同一組件同一請(qǐng)求的調(diào)用加鎖

我開(kāi)發(fā)的一個(gè)頁(yè)面，同時(shí)多次使用了同一個(gè)組件，但是這個(gè)組件一加載就會(huì)調(diào)用同一個(gè)方法，最終同時(shí)調(diào)用同一接口。

但是我們后端對(duì)于同一接口的調(diào)用頻率進(jìn)行了限制，不允許短時(shí)間內(nèi)重復(fù)提交，需要在一個(gè)時(shí)間間隔后提交才能請(qǐng)求成功。

原代碼為：

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);
      });
  });
};

我采用加鎖方式解決這個(gè)問(wèn)題，使用sessionStorage進(jìn)行全局的鎖存儲(chǔ)。

新代碼為：

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;
      });
  });
};

posted @ 2024-11-18 16:23 羅毅豪閱讀(87) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

羅毅豪

js給同一組件同一請(qǐng)求的調(diào)用加鎖

公告