利用async/await/Promise控制异步函数和同步函数先执行异步函数的一个小案例

之前一直不是太懂async/await/Promise之间的关系，以及怎么使用，碰到同步执行和异步执行一起的函数就给同步的函数加个setTimeout让他变成异步，可是，有时候请求后端数据延迟，还是会先执行了setTimeout包裹的函数
最近在学vue+element+admin这个后台管理项目，看到里面用到了这些东西，学习了一些
看看console.log(),和async/await/Promise写在函数的什么位置

// spu展开行查看型号
    async toogleExpand(row) {
        console.log(0)
      let $table = this.$refs.tconsole.log(0)able;
      await new Promise((resolve, reject) => {
        this.tableLoadData.map(item => {
          if (row.id != item.id) {
            $table.toggleRowExpansion(item, false);
          } else {
            if (row.id !== this.spuTypeId) {
              const data = {
                spuId: row.id
              };
              skuList(data).then(res => {
                  //从后端获取表格里的数据，这个不先获取，当表格打开，会出现没有数据的情况
                  console.log(2)
                this.skuTableLoadData = res.result;
                this.spuTypeId = row.id;
                resolve();
              });
            } else {
              resolve();
            }
          }
        });
      });
      console.log(1)
      $table.toggleRowExpansion(row);
    },

如果不用async/await/Promise则会打印 0 1 2
而用了以后，就像上面的写法，执行完成会打印 0 2 1
在Promise的那个函数中，只要没有调用resolve(),永远不会执行后面的方法，console.log(1)根本不会执行

原文参考