async await 的使用和 Demo 解析

async 和 await 字面都很好理解，分别是异步和等待。

 

先来个简单的 demo，代码解析：

定义一个 函数 timeout（异步阻塞 ms 毫秒，模拟异步操作）

定义一个 函数 TextFc （里面用到了 async 和 await），async 申明该函数可以异步处理，await 代码执行阻塞，等待后面的异步操作完成后，再走下面的代码。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    function timeout(ms) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      });
    }
    
    async function TextFc(num, ms) {
      await timeout(ms);
      console.log(num);
    }
    
    TextFc(1, 2000);
  },

 

再加强一下 TextFc 函数，请注意看 await 的使用。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    function timeout(ms) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      });
    }
    
    async function TextFc(num, ms) {
      await timeout(ms);
      console.log('第一次打印日志',++num);
      await timeout(ms);
      console.log('第二次打印日志',++num);
    }
    
    TextFc(1, 2000);
  },

代码运行每隔两秒，执行一次日志打印，看执行的效果图