理解ES7中的async/await

1. 含义

  • 就字面含义而言,async意为“异步”,await意为等待。
  • async function声明用于定义一个返回AsyncFunction对象的异步函数。(异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的Promise返回其结果。)
  • await表达式用于等待一个异步方法执行完成。这会使async函数暂停执行,等待promise的结果出来,然后恢复async函数的执行并返回解析值(resolved)。

2. async 语法

async function function_name([param[, param[, ... param]]]) { statements }

注意:

  • await关键字仅在async函数中有效
  • async函数返回的是一个promise对象(return语句中的返回值会变成promise回调函数的参数)

3. 举个例子

async function test () {
    return 'hello async';
}

let res = test().then((resp) => {
  console.log(resp); // hello async
});
console.log(res);

结果如下,可见async返回了一个Promise对象:

image.png

image.png

Tips:

  • 如果async函数中返回的是一个直接量,async会把这个直接量通过Promise.resolve()封装成Promise对象。(这也可以认为是async的作用之一)
  • 如果async函数没有返回值,它会返回一个Promise.resolve(undefined)

4. await在等待什么?

  • 一般而言,await操作符用于等待一个async函数的执行,等待Promise处理完成。
  • Promise正常处理,则resolve函数的参数会作为await表达式的值继续执行async函数;
  • Promise抛出异常reject),await表达式会把Promise的异常原因抛出;
  • await操作符后的表达式不是 Promise,则返回该值本身。

也就是说,如果await等到的不是一个Promise对象,那么await表达式的运算结果就是它等到的东西;
否则,await会阻塞后面的代码,等待Promise对象resolve,然后得到resolve的值作为await表达式的运算结果。

5. 为什么使用async/await(有什么作用?)

和传统的Promise比起来,async/await的优势在于处理多层回调(then链),而单一的Promise链可能并不难体现async/await的优势。
假设有一个需求,分多个步骤完成,每个步骤都是异步的,并且依赖于上一步的结果。则:
promise的写法:

getData () {
    queryClass(classId).then(res1 => {
        console.log(res1);    // class info
    }).then(res2 => {         
        console.log(res2)     // student info
    }).then(res3 => {       
         console.log(res3)     // student name
    });
}

async的写法:

async getData() {
    await res1 = query(classId);  // query是一个promise对象,res接收query的返回值
    await res2 = query2(res1) ;
    await res3 = query3(res2) ;
}

简单来说,async就是以编写类似同步代码的方式,来编写异步代码。简化使用多个promise时的同步行为。

你可能感兴趣的:(理解ES7中的async/await)