首页 > 其他分享 >JS之循环发送请求代码优化

JS之循环发送请求代码优化

时间:2022-10-24 10:47:01浏览次数:58  
标签:index arr const res JS 发送 代码优化 message data

需求:将数组中的值作为参数,循环调用新增接口实现批量导入功能。因为接口调用有时间间隔限制,避免误操作,所以需要设置接口请求的间隔时间。

原代码如下:

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

 

标签:index,arr,const,res,JS,发送,代码优化,message,data
From: https://www.cnblogs.com/luoyihao/p/16820703.html

相关文章