以图表和示例的角度解读async/await

摘要：在中，表示抽象的非阻塞异步执行。在完成之后安排代码的唯一方式是通过方法绑定回调函数。下图描述了该示例的计算过程方法中绑定的回调函数只有当成功的时候才会调用。为了处理失败的，需要通过绑定另一个回调函数。

ES7中，async/await 语法使异步promise的协调变得很简单。如果你需要以特定顺序异步获取来自多个数据库或API的数据，可以使用杂乱的promise或回调函数。async/await使我们可以更简便地处理这种逻辑，代码的可读性和可维护性也更好。

在该教程中，我们用图表和一些简单的例子来解释async/await的语法和语义。
开始讲解之前，我们先对promise进行一个简单的概述，如果你对promise已经很熟悉了，可以跳过该部分内容。

在js中，promise表示抽象的非阻塞异步执行。js中的promise与Java中的 Future或C#中的Task很相似。

promise通常用于网络和I/O操作-例如，读取文件，发起HTTP请求。为了不阻塞当前执行线程，我们创建一个异步promise，使用then方法绑定一个回调函数，该回调函数会在promise完成后触发。回调函数本身也可以返回一个promise，所以promise可以高效的链式调用。

简单起见，所有的例子中我们都假定request-promise库已经安装和加载完成了，如下所示：

var rp = require("request-promise");

现在我们可以像这样发起一个简单的HTTP GET请求，该方法返回一个promise：

const promise = rp("http://example.com/")

接下来，看一个例子：

console.log("Starting Execution");

const promise = rp("http://example.com/");
promise.then(result => console.log(result));

console.log("Can"t know if promise has finished yet...");

在第三行，我们创建了一个promise，然后我们在第四行中为其绑定了一个回调函数。由于promise是异步执行的
，所以执行到第六行时，我们不确定promise有没有完成。多次运行上面的代码，得到的结果可能每次都不一样。更通俗地讲，promise后面的代码和promise是并行运行的。

在promise完成之前，没有办法中断当前的操作序列。这与Java中的 Future.get是不同的，Future.get允许我们中断当前的线程直到Future完成。js中，我们不会轻易地等待promise执行完成。在promise完成之后安排代码的唯一方式是通过then方法绑定回调函数。

下图描述了该示例的计算过程：

then方法中绑定的回调函数只有当promise成功的时候才会调用。如果promise失败的话（例如，由于网络错误），回调不会执行。为了处理失败的promise，需要通过catch绑定另一个回调函数。

rp("http://example.com/").
    then(() => console.log("Success")).
    catch(e => console.log(`Failed: ${e}`))

最后，为了测试一下效果，我们通过Promise.resolve和Promise.reject简单地生成成功和失败的promise:

const success = Promise.resolve("Resolved");
// Will print "Successful result: Resolved"
success.
    then(result => console.log(`Successful result: ${result}`)).
    catch(e => console.log(`Failed with: ${e}`))


const fail = Promise.reject("Err");
// Will print "Failed with: Err"
fail.
    then(result => console.log(`Successful result: ${result}`)).
    catch(e => console.log(`Failed with: ${e}`))

有关promise更详细的教程，查看这篇文章

单个promise是很简单的。可是，我们编写复杂的异步逻辑时，可能需要组合使用多个promise来处理。大量的then语句和匿名回调函数很容易让代码变得不可维护。

例如，我们要编写一个如下功能的代码：

发起一个HTTP请求，等待完成后，打印出结果

然后发起两个并行的HTTP请求；

后两个请求都完成后，打印出他们的结果。

下面的代码片段演示了上述功能的实现：

// Make the first call
const call1Promise = rp("http://example.com/");

call1Promise.then(result1 => {
    // Executes after the first request has finished
    console.log(result1);

    const call2Promise = rp("http://example.com/");
    const call3Promise = rp("http://example.com/");

    return Promise.all([call2Promise, call3Promise]);
}).then(arr => {
    // Executes after both promises have finished
    console.log(arr[0]);
    console.log(arr[1]);
})

首先发起第一个HTTP请求，当该请求完成后，调用它的回调函数（1-3行）。在回调函数中，我们又相继发起两个HTTP请求生成了两个promise。这两个promise并行运行；当他们都执行完后，我们还需要为其绑定一个回调函数。因此，我们用promise.all将这两个promise组合成一个promise, 只有当他们都完成后，这个promise才会完成。由于第一个回调函数的结果是promise，因此我们链式地调用另一个then方法和回调函数输出最终结果。

下图描述了这个执行过程：

对于这么简单的例子，我们就用了两个then回调和promise.all来同步并行的promise。试想如果我们执行更多的异步操作或者增加错误处理函数呢？这种方式很容易让代码变成一堆杂乱的then、promise.all和回调函数。

async 函数提供了一种简洁的方式来定义一个返回promise的函数。
例如，下面两种定义是等价的：

function f() {
    return Promise.resolve("TEST");
}

// asyncF is equivalent to f!
async function asyncF() {
    return "TEST";
}

相似地，在异步函数抛出异常与返回一个reject promise对象的函数等价：

function f() {
    return Promise.reject("Error");
}

// asyncF is equivalent to f!
async function asyncF() {
    throw "Error";
}

我们不能同步等待promise的完成。只能通过then方法传入一个回调函数。我们鼓励非阻塞编程，因此同步等待promise是不允许的。否则，开发者会产生编写同步脚本的想法，毕竟同步编程要简单的多。

但是，为了同步promise我们需要允许他们等待彼此的完成。换句话说，如果操作是异步的（也就是说包裹在promise中），它应该可以等待其他异步操作的完成。但是，js解析器怎么知道操作是否跑在promise中？

答案是async关键字。每个async函数返回一个promise。因此，js解析器知道所有的操作都位于async函数中，并将所有的代码包裹在promise中异步地执行。所以，async函数，允许操作等待其他promise的完成。

说一下await关键字。它只能用在async函数中,允许我们同步等待promise的完成。如果在async函数外边使用promise，我们仍然需要使用then回调函数。

async function f(){
    // response will evaluate as the resolved value of the promise
    const response = await rp("http://example.com/");
    console.log(response);
}

// We can"t use await outside of async function.
// We need to use then callbacks ....
f().then(() => console.log("Finished"));

现在我们看一下前面的那个例子如何用async/await进行改写：

/ Encapsulate the solution in an async function
async function solution() {
    // Wait for the first HTTP call and print the result
    console.log(await rp("http://example.com/"));

    // Spawn the HTTP calls without waiting for them - run them concurrently
    const call2Promise = rp("http://example.com/");  // Does not wait!
    const call3Promise = rp("http://example.com/");  // Does not wait!

    // After they are both spawn - wait for both of them
    const response2 = await call2Promise;
    const response3 = await call3Promise;

    console.log(response2);
    console.log(response3);
}

// Call the async function
solution().then(() => console.log("Finished"));

以上代码，我们的解决方案就封装在了async函数中。我们可以直接await promise的执行，省掉了then回调函数。最后，我们只需要调用async函数。它封装了调用其他promise的逻辑，并返回一个promise。

实际上在上面的例子中，promise是并行触发的。本例中也一样（7-8行）。注意第12-13行我们使用了await阻塞主线程，等待所有的promise执行完成。后面，我们看到promise都完成了，和前面的例子类似（promise.all(...).then(...)）。

其执行流程与前例的流程是相等的。但是，代码变得更具可读性和简洁。

底层实现上，await/async实际上转换成了promise，换句话说，await/async是promise的语法糖。每次我们使用await时，js解析器会生成一个promise，并将async函数中的剩余代码放到then回调中去执行。
思考下面的例子：

async function f() {
    console.log("Starting F");
    const result = await rp("http://example.com/");
    console.log(result);
}

下面描述函数f的基本计算过程。由于f是异步的，它会与调用方并行执行：

函数f开始执行，遇到await后生成一个promise。此时，函数的其余部分被封装在回调中，并在promise完成后执行。

前面的大部分例子中，我们都是假设promise成功完成了。因此，等待promise返回一个值。如果我们等待的promise失败了，在async函数中会导致一个异常。我们可以使用标准的try/catch来捕获和处理它。

async function f() {
    try {
        const promiseResult = await Promise.reject("Error");
    } catch (e){
        console.log(e);
    }
}

如果async函数没有处理异常，不管是promise reject了，还是产生了其他bug，它都会返回一个rejected的promise对象。

async function f() {
    // Throws an exception
    const promiseResult = await Promise.reject("Error");
}

// Will print "Error"
f().
    then(() => console.log("Success")).
    catch(err => console.log(err))

async function g() {
    throw "Error";
}

// Will print "Error"
g().
    then(() => console.log("Success")).
    catch(err => console.log(err))

这给我们提供了一种简便的方法，通过已知的异常处理机制来处理被rejected的promise。

async/await 在语言结构上是对promise的补充。但是，async/await 并不能取代纯promise的需求。例如，在正常函数和全局作用域我们不能使用await，所以需要使用普通的promise：

async function fAsync() {
    // actual return value is Promise.resolve(5)
    return 5;
}

// can"t call "await fAsync()". Need to use then/catch
fAsync().then(r => console.log(`result is ${r}`));

我通常会将异步逻辑封装到一个或者少数几个async函数中，然后在非异步代码中调用async函数。这样我可以最小化降低书写then/catch的数量。
学者们指出，并发性和并行性是有区别的。并发性是指将独立的进程（一般意义上的进程）组合在一起，而并行实际上是同时执行多个进程。并发性是关于应用程序设计和结构的，而并行性是关于实际执行的。

我们以一个多线程应用程序为例。应用程序分离到线程定义了它的并发模型。这些线程在可用内核上的映射定义了它的级别或并行性。并发系统可以在单个处理器上高效运行，在这种情况下，它不是并行的。

就此而言，promise允许我们将一个程序分解为并行的并发模块，也可以不并行运行。实际的JavaScript执行是否并行取决于实现。例如，Node Js是单线程的，如果一个promise是CPU绑定的，你就不会看到太多的并行性。然而，如果你通过像Nashorn这样的东西把你的代码编译成java字节码，理论上你可能能够在不同核心上映射CPU绑定的promise，并且实现并行性。因此，在我看来，promise（无论是普通的或通过await/async）构成了JavaScript应用程序的并发模型。