简单理解JavaScript 的async/await

什么是Async/Await?

• async 函数 ： 是 Generator 函数的语法糖
• async函数返回一个 Promise 对象，可使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操做完成，再接着执行函数体内后面的语句。
• async/await与Promise同样，是非阻塞的
• async函数返回的是 Promise 对象，能够做为await命令的参数

2、语法

一、返回 Promise 对象

async函数返回一个 Promise 对象。

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

async function f() {
    return 'hello world';
}

f().then(v => console.log(v))
// "hello world"

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

async function f() {
    throw new Error('出错了');
}

f().then(
    v => console.log(v),
    e => console.log(e)
)
// Error: 出错了

二、Promise对象的状态变化

只有async函数内部的异步操做执行完，才会执行then方法指定的回调函数。

async function getTitle(url) {
    let response = await fetch(url);
    let html = await response.text();
    return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"

三、await命令

正常状况下，await命令后面是一个 Promise 对象。若是不是，会被转成一个当即resolve的 Promise 对象。

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

只要一个await语句后面的 Promise 变为reject，那么整个async函数都会中断执行

async function f() {
    await Promise.reject('出错了');
    await Promise.resolve('hello world'); // 不会执行
}

有时，咱们但愿即便前一个异步操做失败，也不要中断后面的异步操做。这时能够将第一个await放在try...catch结构里面，这样无论这个异步操做是否成功，第二个await都会执行。

async function f() {
    try {
        await Promise.reject('出错了');
    } catch(e) {
    }
    return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))
// hello world

另外一种方法是await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。

async function f() {
    await Promise.reject('出错了')
    .catch(e => console.log(e));
    return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))
// 出错了
// hello world

四、错误处理

若是await后面的异步操做出错，那么等同于async函数返回的 Promise 对象被reject。

防止出错的方法，将其放在try...catch代码块之中。

async function f() {
    try {
        await new Promise(function (resolve, reject) {
            throw new Error('出错了');
        });
    } catch(e) {
    }
    return await('hello world');
}
若是有多个await命令，能够统一放在try...catch结构中。

async function main() {
    try {
        const val1 = await firstStep();
        const val2 = await secondStep(val1);
        const val3 = await thirdStep(val1, val2);
        console.log('Final: ', val3);
    }
    catch (err) {
        console.error(err);
    }
}

总结

函数前的 async 关键字有两个做用：

1. 老是返回 promise。
2. 容许在其中使用 await。

在 promise 以前的 await 关键字，使 JavaScript 等待 promise 被处理，而后：

1. 若是有 error，就会产生异常，就像在那个地方调用了 throw error同样。
2. 不然，就会返回值，咱们能够给它分配一个值。