JS之循環發送請求代碼優化

需求：将數組中的值作為參數，循環調用新增接口實作批量導入功能。因為接口調用有時間間隔限制，避免誤操作，是以需要設定接口請求的間隔時間。

原代碼如下：

const recursive = (arr, index) => {
  arr[index]().then((res) => {
    if (index + 1 < arr.length) {
      setTimeout(() => recursive(arr, index + 1), 1000);
    } else {
      query();
    }
  });
};

const finish = (res) => {
  let arr = [];
  for (let param of res) {
    param.taskId = sessionStorage.taskId;
    let p = () => {
      return new Promise((resolve, reject) => {
        MiitTaskOrderApi.add(param)
          .then((response) => {
            const data = response.data;
            if (data.code === 200) {
              resolve();
            } else {
              message.error(data.message);
            }
          })
          .catch((error) => {
            message.warning(error.message);
          });
      });
    };
    arr.push(p);
  }
  recursive(arr, 0);
};      

優化後的代碼如下：

const pause = (millis) => new Promise((resolve) => setTimeout(resolve, millis));

const finish = async (res) => {
  for (let [index, param] of res.entries()) {
    param.taskId = sessionStorage.taskId;
    MiitTaskOrderApi.add(param)
      .then((response) => {
        const data = response.data;
        if (data.code === 200) {
          if (index == res.length - 1) {
            query();
            message.success("導入成功");
          }
        } else {
          message.error(data.message);
        }
      })
      .catch((error) => {
        message.warning(error.message);
      });
    await pause(1000);
  }
};      

優化點如下：

1.通過定義和使用pause函數，配合async/await，實作請求間的間隔。

2.通過使用數組的entries()函數，獲得數組循環的index值，判斷是否為最後一次循環，進而執行查詢操作。