查看原文
其他

【第1094期】图与例解读Async/Await

2017-10-30 安秦 前端早读课

前言

现在有在用了吗?今日早读文章由百度外卖前端@安秦翻译分享。

正文从这开始~

概述

JavaScript ES7的async/await语法让异步promise操作起来更方便。如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调。然而使用async/await可以让我们用更加可读、可维护的方式来表达这种逻辑。

这篇教程以图表与简单例子来阐述JS async/await的语法与运行机理。

在深入之前,我们先简单回顾一下promise,如果对这方面概念有自信,大可自行跳过。

Promise

在JS的世界里,一个promise抽象表达一个非阻塞(阻塞指一个任务开始后,要等待该任务执行结果产生之后才继续执行后续任务)的异步流程,类似于Java的Futrue或者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...");

我们在第3行产生了一个promise,然后在第4行附上了一个回调函数。返回的promise是异步的,所以当执行的第6行的时候,我们无法确定这个promise有没有完成,多次执行可能有不同的结果(译者:浏览器里执行多少次,这里promise都会是未完成状态)。概括来说,promise之后的代码跟promise自身是并发的(译者:对这句话有异议者参见本文最后一节的并发说明)。

并不存在一种方法可以让当前的执行流程阻塞直到promise完成,这一点与Java的Futrue.get相异。JS里,我们无法直接原地等promise完成,唯一可以用于提前计划promise完成后的执行逻辑的方式就是通过then附加回调函数。

下面的图表描绘了上面代码例子的执行过程:


Promise的执行过程,调用“线程”无法直接等待promise结果。唯一规划promise之后逻辑的方法是使用then方法附加一个回调函数。


通过then 附加的回调函数只会在promise成功是被触发,如果失败了(比如网络异常),这个回调不会执行,处理错误需要通过catch 方法:

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

最后,为了方便试验功能,我们可以直接创建一些“假想”的promise,使用Promise.resolve生成会直接成功或失败的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行)。在回调里,我们为另外两次请求制造了promise(第8-9行)。这两个promise并发运行,我们需要计划一个在两个都完成时执行的回调,于是,我们通过Promise.all(第11行)来讲他们合并。这第一个回调的返回值是一个promise,我们再添加一个then来输出结果(第12-16行)。

以下图标描绘这个计算过程:


将promise组合的计算过程。使用“Promise.all”将两个并发的promise合并成一个。


为了一个简单的例子,我们最终写了两个then回调以及一个Promise.all来同步两个并发promise。如果我们还想再多做几个异步操作或者添加一些错误处理会怎样?这种实现方案最终很容变为纠缠成一坨的then、Promise.all以及回调匿名函数。

Async函数

一个async函数是定义会返回promise的函数的简便写法。

比如,以下两个定义是等效的:

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

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

相似地,会抛出错误的async函数等效于返回将失败的promise 的函数:

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

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

Await

以前,当我们产生一个promise,我们无法同步地等待它完成,我们只能通过then注册一个回调函数。不允许直接等待一个promise是为了鼓励开发者写非阻塞的代码,不然开发者会更乐意写阻塞的代码,因为这样比promise和回调简单。

然而,为了同步多个promise,我们需要它们互相等待,换句话说,如果一个操作本身就是异步的(比如,用promise包装的),它应该具备能力等待另一个异步操作先完成。但是JS解释器如何知道一个操作是不是在一个promise里的?

答案就是async关键字,所有的async函数一定会返回一个promise。所以,JS解释器也可以确信async函数里操作是用promise包装的异步过程。于是也就可以允许它等待其他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'));

现在我们来看看我们可以如何解决之前提到的问题:

// 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函数里。这样我们就可以直接对promise使用await了,也就规避了写then回调。最后我们调用这个async函数,然后按照普通的方式使用返回的promise。

要注意的是,在第一个例子里(没有async/await),后面两个promise是并发的。所以我们在第7-8行也是如此,然后直到11-12行才用await来等待两个promise都完成。这之后,我们可以确信两个promise都已经完成(与之前Promise.all(...).then(...)类似)。

计算流程跟之前的图表描绘的一样,但是代码变得更加已读与直白。

事实上,async/await其实会翻译成promise与then回调(译者:babel其实是翻译成generator语法,再通过类似co的函数运行,co内部运行机制离不开promise)。每次我们使用await,解释器会创建一个promise然后把async函数的后续代码放到then回调里。

我们来看看以下的例子:

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

f函数的内在运行过程如下图所描绘。因为f标记了async,它会与它的调用者“并发”:


await的计算逻辑


函数f启动并产生一个promise。在这一刻,函数剩下的部分都会被封装到一个回调函数里,并被计划在promise完成之后执行。

错误处理

在之前的例子里,我们大多假定promise会成功,然后await一个promise的返回值。如果我们等待的promise失败了,会在async函数里产生一个异常,我们可以使用标准的try/catch来处理它:

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

如果async函数不处理这个异常,不管是这异常是因为promise是被reject了还是其他的bug,这个函数都会返回一个被reject掉的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))

这就让我们可以使用熟悉的方式来处理错误。

扩展说明

async/await是一个对promise进行补充的语法部件,它能让我们写更少的重复代码来使用promise。然而,async/await并不能彻底取代普通的promise。比如,如果我们在一个普通的函数或者全局作用域里使用一个async函数,我们无法使用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回调。

async / await是让promise用起来更简洁的语法糖。所有的async / await都可以用普通的promise来实现。所有总结来说,这只是个代码样式与简洁的问题。

学院派的人会指出,并发与并行是有区别的(译者:所以前文都是说并发,而非并行)。参见Rob Pike的讲话或者我之前的博文。并发是组合多个独立过程来一起工作,并行是多个过程同时执行。并发是体现在应用的结构设计,并行是实际执行的方式。

我们来看看一个多线程应用的例子。将应用分割成多个线程是该应用并发模型的定义,将这些线程放到可用的cpu核心上执行是确立它的并行。一个并发的系统也可以在一个单核处理器上正常运行,但这种情况并不是并行。


并发(concurrent)与并行(parallel)


以这种方式理解,promise可以将一个程序分解成多个并发的模块,它们或许,也可能并不会并行执行。JS是否并行执行要看解释器自身的实现。比如,NodeJS是单线程的,如果一个promise里有大量的CPU操作(非I/O操作),你可能感受不到太多并行。然而如果你用像nashorn这样的工具把代码编译成java字节码,理论上你可以把繁重的CPU操作放到其他内核上来获得平行效果。于是在我的观点中,promise(不管是裸的还是有async/await)只是作用于定义JS应用的并发模型(而非确定逻辑是否会并行运行)。

最后,Ta曾分享过:

【第1025期】理解Service Worker

推荐阅读:

【第1092期】与你息息相关的业界新闻

【第1089期】babel到底该如何配置?

关于本文

译者:@安秦

译文:https://zhuanlan.zhihu.com/p/30500894

作者:@Nikolay

原文:http://nikgrozev.com/2017/10/01/async-await/

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存