asyns/await初体验

一、入门例子1

我们在没有使用asyns/await时，先看下面的代码：

  var sleep=function () {
      setTimeout(()=>{
        console.log("我在中间执行")
    },5000)
  };
  var start=   function () {
    try{
      console.log("我最先执行");
       sleep() ;
      setTimeout(()=>{
        console.log("我最后执行");
    },2000)
    } catch(error){
      console.log("出错了",error)
    }
  };
  start();

上述代码运行结果

image.png

显然，这段代码是同步执行的，没有满足我们的预期，使用asyns/await异步可以轻松解决：

  var sleep=function () {
      return  new  Promise(function (reslove,reject) {
          setTimeout(()=>{
              console.log("我在中间执行")
            reslove();
          },5000)
      })
  };
  var start=  async function () {
      try{
        console.log("我最先执行");
        await sleep() ;
        setTimeout(()=>{
          console.log("我最后执行");
        },2000)
      } catch(error){
          console.log("出错了",error)
      }
  };
  start();

上述代码运行结果

image.png

使用asyns/await需要注意的是：

1、await 必须在async 声明的函数的上下文中；
2、 await 后面跟的函数应该返回的是promise对象，否则其它返回值就没意义了；

二、入门例子2--传递数据

上面例子中promise没有传数据，这次稍微修改下

  var sleep=function () {
      return  new  Promise(function (reslove,reject) {
          setTimeout(()=>{
              console.log("我在中间执行")
            reslove("我是数据哦");
          },4000)
      })
  };
  var start=  async function () {
      try{
          console.log("我最先执行");
          let data=await sleep() ;
          console.log("我最后执行，我得到的数据是：",data);
      }catch(error){
          console.log("出错了",error)
      }
  };
  start();

上述代码运行结果：

image.png

三、入门例子3--捕获异常

  var sleep=function () {
      return  new  Promise(function (reslove,reject) {
          setTimeout(()=>{
              console.log("我在中间执行")
            reject("reject被执行啦。。。");
          },4000)
      })
  };
  var start=  async function () {
      try{
          console.log("我最先执行");
          let data=await sleep() ;
          console.log("我最后执行，我得到的数据是：",data);
      }catch(error){
          console.log("出错了，错误原因是",error)
      }
  };
  start();

image.png

四、入门例子--await必须在async声明的函数的上下文中

  var sleep=function () {
      return  new  Promise(function (reslove,reject) {
          setTimeout(()=>{
              console.log("我在中间执行")
            reslove();
          },3000)
      })
  };
  var start=  async function () {
      try{
          let ten=[1,2,3,4,5,6,7,8,9,10];
          console.log("我最先执行");
       for (let v of ten){
         console.log(`当前是第${v}次等待..`);
         await sleep(); //这里的上下文还是async
       }
          console.log("我最后执行");
      }catch(error){
          console.log("出错了，错误原因是",error)
      }
  };
  start();

上述代码运行结果

image.png

因为

 for (let v of ten) ｛
     console.log(`当前是第${v}次等待..`);
         await sleep();
｝

中的for (let v of ten) 上下文还在async函数中，如果将for (let v of ten)相关部分改成

ten.forEach(function (v) {
          console.log("forEach 里的this",this);
          console.log(`当前是第${v}次等待..`);
          await sleep(); // 不是在async函数上下文中 而是在forEach 中了
        });

这样就不行了，因为此时的await sleep(); 不是在async函数上下文中。

参考资料:

1、体验异步的终极解决方案-ES7的Async/Await

*本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢!