async / await

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

什么是async和await

和Promise一样，是解决Javascript异步编程的一种方式，async / await基于Promise，不能用于普通的函数。

• async：

  • 写在函数前面的一个修饰符，被async修饰的函数会默认返回一个Promise的resolve，里面的值就是获取到的结果。
  • 因为async返回的是一个Promise对象，所以在await获取返回的值需要写在async的里面，在外面可以用Promise的then获取值

• await：

  • 表达式之后的代码可以被认为是存在在链式调用的then回调中，多个await表达式都将加入链式调用的then回调中，返回值将作为最后一个then回调的返回值。
  • 因为async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值，也可以说是 await 在等 async 函数，但它等的实际是一个返回值。也就是说 await 不仅仅用于等Promise 对象的结果，也可以等任意表达式的结果

• 注意

  • await必须要写在async中
  • await返回值就是Promise成功之后返回的值
  • try...catch用于捕获和抛出异常

async / await和Promise的异同

• async / await和Promise都是解决异步编程的方法
• Promise是ES6规定的，async / await是ES7规定的
• async / await代码比Promise简洁，可以被当作是Promise的语法糖
• Promise.all等并行操作async / await没有

使用

• Promise解决异步（一个）

  let data = ()=> {
      getData()
          .then(res=> {
          	console.log(res)
      	}
          .catch(err=> {
               console.log(err)
          })
      )
  }
  

• async / await解决异步（一个）

  let data = async()=> {
      try {
          let res = await getData()
      	console.log(res)
      }
      catch(err) {
          console.log(err)
      }
  }
  

• Promise解决异步（多个）

  function fn1() {
      let P = new Promise(function(resolve,reject){
          setTimeout(function(){
              console.log('fn1 success');
              resolve(111111)
          },1000)
  	});
      return P;
  }
  function fn2() {
      let P = new Promise(function(resolve,reject){
          setTimeout(function(){
              console.log('fn2 success');
              resolve(222222)
          },2000)
  	});
      return P;
  }
  
  let data = ()=> {
      return fn1().then(res1=> {
          return fn2(res1).then(res2)=> {
              console.log(res1,res2)
          }
      })
  }
  

• async / await解决异步（多个）

  let data = async()=> {
      let res1 = await fn1()
      let res2 = await fn2(res1)
      console.log(res1,res2)
  }