天天看点

js连续请求并发处理,promise和async/await

本次使用,核心在于promise和async/await的使用。

上代码:

//获取所有门店的数据,一万家门店情况
this.storelists(1, 10000, "", true)
//注意async 
  .then(async e => {
    let that = this;
//for循环进行所有数据处理
    for (var i = 0; i < e.length; i++) {
//业务函数调用,注意await
      await that.settime(e[i]);
    }
//提示框开启
    this.$store.commit("gLoading", {
      isShow: false,
      title: "更新二维码中……"
    });
  })
  .catch(e => {
    console.log(e);
//提示框关闭
    this.$store.commit("gLoading", {
      isShow: false,
      title: "更新二维码中……"
    });
    this.$notify({
      title: "错误",
      message: "获取队列失败,更新终止",
      type: "error"
    });
  });
           
//函数封装处理
settime(row) {
//需要用promise进行封装
  return new Promise(resolve =>
    setTimeout(() => {
//实际业务函数
      this.StoreBuildQRcode(row)
        .then(() => {
          resolve();
        })
        .catch(e => {
          this.storeQueue.push(e);
          resolve();
        });
    }, 1500)
  );
},
           

小伙伴主要看代码和我的注释。

上面代码是我实际项目中直接贴过来的,有语法错误,但是无逻辑问题。下面是简化版。可以直接运行在支持对应的语法环境下。我已经注释处理了

//对业务函数进行封装
function settime(row) {
  return new Promise(resolve =>
    setTimeout(() => {
      //业务函数处理,注意业务函数也要处理成同步格式,否则会造成异步阻塞
      console.log(row);
      //核心需要返回promise格式的数据,不要返回错误。错误请自行处理业务函数逻辑,否则并发停止
      resolve();
    }, 1000)
  );
}
//async/await函数语法糖处理,利用for循环模拟并发10个的情况
async function bingfa() {
  for (var i = 0; i < 10; i++) {
    //业务函数调用
    await settime(i);
  }
}
bingfa();
           

不知道promise函数怎么使用的请看我的这篇博客https://blog.csdn.net/qq_32858649/article/details/87932904

里面讲解了关于promise函数的使用。

注意:不可以用arr.map(),至少我写不来。map函数会导致依旧是异步处理

继续阅读