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值，判断是否为最后一次循环，从而执行查询操作。