vue 函数（一）：async/await方法同步

柔光的暖阳◎ 2022-12-09 13:57 178阅读 0赞

一、用法：和java不同的是，nodejs是一个单线程函数，主线程在执行的时候，一旦发生了异步处理（文件读写、网络请求、定时任务、读取数据库等），一方面，js会让操作系统相关部件去处理这些请求，另一方面，它会继续执行后面的代码，这就是异步。如果某些场景对顺序有要求，需要同步（按顺序）执行，可以使用async搭配await实现，await函数不能单独使用。

语法如下：

async methodName(params){
      let isSuccess = false;
      await this.$http({
        url: URL,
        method: "get",
        params: this.$http.adornParams({
          params:params
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if(data.exist == 0){
            isSuccess = true
          }
        }
      }).catch(err => {
        console.log(err);
        this.$message({
          type: "error",
          message: "系统异常"
        });
      });
      return isSuccess
    }

async函数返回的是一个Promise对象，可以使用then函数添加回调函数

methodaa() {
      this.methodName(this.params).then(function (result) { 
        if (result) {
          // do sth.
        }else {
          // do other sth.
        }
      })
    }

**【补充】**在JS里，当然也并非所有操作都是异步的，比如for循环，无论这个for循环需要耗时多长，系统也一定会等它转完之后才会执行下面的语句

二、实例：

1、异步：如我希望以下代码按照第一、二、三、四步的顺序执行：

export default {
      name: 'Default',
      data() {
        return {
          id: ''
        };
      },
    
      created() {
        this.init();
      },
      methods: {
        init() {
          //第一步
          let res = this.getReportId();
          //第四步
          this.id = res;
          alert('4:' + this.id);
        },
    
        getReportId(scene) {
          let id = '';
          this.$api['report/getMyReports']({
            roleId:'gly'
          }).then(data => {
            if (data && data.length > 0) {
              //第二步
              id = data[0].reportId;
              alert('2:' + id);
            }
          });
          //第三步
          alert('3:' + id);
          return id;
        }
      }
    };
    </script>

执行的结果却是：

![20200922163252817.png][]

![20200922163325858.png][]

![20200922163333909.png][]

可以看到，ajax请求最后执行，其他部分按顺序先执行了。可以修改下ajax的return顺序再验证下这个结论：

执行顺序：

![20200922165340208.png][]

![20200922165346943.png][]

这会导致我在最后一步（第四步）获取的结果不准确。常用的解决方法是把第四步的赋值操作放到第二步中，即接口响应数据了再赋值。下面用另一种方法，代码同步方法来实现：

2、ajax请求同步方法：

执行结果：

![20200922164323806.png][]

![20200922164337724.png][]

![20200922164345861.png][]

[20200922163252817.png]: /images/20221123/208d76ebd441446fa7ee7242f48b0704.png
[20200922163325858.png]: /images/20221123/7bb70b24dc9641048a9b627a015f56eb.png
[20200922163333909.png]: /images/20221123/8682ef1316704fa188c6c64667687299.png
[20200922165340208.png]: /images/20221123/87b8b2567c224ad087a94d272ae239b7.png
[20200922165346943.png]: /images/20221123/47c57e9c4aee450c9ff95c5d3ea4a9e0.png
[20200922164323806.png]: /images/20221123/2d012b8a0f8347188857e52172cdcfd9.png
[20200922164337724.png]: /images/20221123/08fb6fc2f1654de9906b0256704dd15c.png
[20200922164345861.png]: /images/20221123/7a7e28e989db4df48575004537cb9d79.png