ES6学习笔记19--async函数

• 概念

async 是 Generator 函数的语法糖。

async 是将 Generator 函数的星号（*）替换成 async，将 yield 替换成 await 。

async 的实现原理就是将 Generator 函数和自动执行器包装在一个函数里。

async 函数完全可以看做是将多个异步操作，包装成一个Promise 对象，而 await 命令就是内部 then 命令的语法糖。

• 基本用法

async 函数返回一个Promise 对象，可以使用 then() 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成后，再接着执行函数体内后面的语句。

/*async 函数有多种使用形式*/

//(1) 函数声明

async function foo(){}

//(2) 函数表达式

const foo =async function(){}

//(3) 对象的方法

let obj = {
    async foo(){}
};
obj.foo().then(...)

//(4) 箭头函数

const foo = async () =>{}

//(5) Class 的方法

class Storage{
    constructor(){
        this.cachePromise = caches.open('avatars');
    }
    async getAvatar(name) {
        const cache = await this.cachePromise;
        return cache.match(`/avatars/${name}.jpg`);
    }
}

const storage = new Storage();
storage.getAvatar('jake').then(…);

• async 语法

（1） 返回Promise 对象

async 函数内部 return 语句返回的值，会成为 then() 方法回调函数的参数。

async 函数内部抛出错误，会导致返回的Promise 对象变为 reject 状态。抛出的错误对象会被 catch 方法回调函数接收到。

（2）Promise对象的状态改变

async 函数返回的Promise 对象，必须等到内部所有 await 命令后面的Promise 对象执行完才会发生状态改变，除非遇到 return 语句或 抛出错误。 即只有 async 函数内部的异步操作执行完，才会执行 then() 方法指定的回调函数。

（3）await 命令

await 后 Promise 对象状态变为 reject，则 reject 的参数会被 catch 方法的回调函数接收到。

任何一个 await 语句后面的 Promise 对象变为 reject 状态，那么整个 async 函数都会被中断执行。

若希望前一个异步操作失败，不要中断后面的异步操作，有两种方法：

（1）将前一个异步操作 await 放在 try...catch 结构中。

（2）await 后的Promise 对象再跟一个 catch 方法，处理前面可能出现的错误。

正常情况下，await 后是一个Promise 对象，返回该对象的结果.但如果不是Promise 对象，就直接返回对应的值

async function f() {
  return await 123; // 等同于 return 123;
}

另一种情况：await 后是一个 thenable 对象(即定义了 then 方法的对象)，那么 await 会将其等同于 Promise对象

（4）错误处理

任何一个 await 语句后面的 Promise 对象变为 reject 状态，那么整个 async 函数都会被中断执行。

若希望前一个异步操作失败，不要中断后面的异步操作，有两种方法：

（1）将前一个异步操作 await 放在 try...catch 结构中。

（2）await 后的Promise 对象再跟一个 catch 方法，处理前面可能出现的错误。

（5）注意点

（1） await 命令后面的Promise 对象，运行结果可能是 rejected，所以最好将 await 命令 放在 try...catch 代码块中

（2）多个 await 命令后面的异步操作，若不存在继发关系，最好让他们同时触发，缩短程序的执行时间。

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

（3）await 命令只能用在 async 函数之中，如果用在普通函数中，就会报错。

（4）async 函数可以保留运行堆栈。