async+await 异步操作同步执行用法

经常遇到这样的需求,循环请求数据渲染页面,光写循环请求包裹请求实体达不到想要的目的,那么要怎么做?
首先要知道循环的原理,在你循环请求接口数据的时候,循环体执行完毕,可能接口还没有执行完毕,这样导致一个结果渲染的结果每次都不相同。
怎么解决循环体执行一次异步请求,同步等待处理方法呢,async与await配合使用才能使异步操作同步化,await就是等待的意思,等待某一个函数执行完之后,后面的代码才能开始执行。有个弊端是如果数据迟迟不返回,下一次循环还没有开始就会导致页面卡住,可用Promise.all代替即可。
下面是react写法,具体代码

  @action async getMonitor() {
    for (let i = 0; i < this.selectMonitorList.length; i++) {
      let param = {
        参数
      };
      await 调用接口方法名(param).then((res) => {
        if (res instanceof Object && res.code === 0) {
          处理数据
        } else {
          message.destroy();
          message.error(res.msg);
        }
      });
    }
  }

总结:循环数据的时候用for循环,如果用其他循环会报错ESLint的错误

你可能感兴趣的:(async+await 异步操作同步执行用法)