zoukankan      html  css  js  c++  java
  • 利用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)根本不会执行

    原文参考

  • 相关阅读:
    从Mysql中取出数据并用jieba统计词频
    关于important的用法
    Spring boot主启动类探究
    PHPMyadmin 配置多个网段
    Perl 对json的过滤脚本
    Perl 校验命中的脚本
    web渗透测试工具—Fiddler(转)
    PerlIde in NetBeans7.3 for Debian
    Perl last和next的用法区别
    2020.7.25
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/14848753.html
Copyright © 2011-2022 走看看