Javascript引擎从设计伊始就是单线程的，然而真实世界的事件往往是多头并进的。为了解决这个问题，浏览器通过UI事件、网络事件及回调函数引入了一定程度的并发执行可能(但Javascript引擎仍然是单线程的，这种并发，类似于其它语言的协程)。
在复杂的程序里，回调函数是一个坑，它使得代码变得支离破碎，难以阅读。后来出现了Promise，但也没能完全解决上述问题。
Javascript的最新方法是async/await，一种在其它语言中早已实现的方案。
一个典型的回调场景
在其它语言里，代码经常是顺序执行的：当代码执行到第二行时，第一行的代码确定已经执行，并且第二行可以利用其结果。即使这里遇到多线程或者其它异步的情况，这些程序也提供了等待机制，以确保代码仍然是顺序执行的。
但在Javascript中，由于之前没有这种等待机制，如果遇到异步的情况，则只能使用回调机制来确保逻辑按序执行。比如，如果我们的代码必须在文档加载完成之后执行，我们就必须利用浏览器提供的回调机制：
window.onload = function main(){}
现在我们来看在一个复杂的工程中，这种回调机制会有多困难。当然，为了讨论方便，我们只会截取这类工程中最简单的部分来看：
假设我们程序的入口为main函数，由于这是一个商业应用，多语言支持和多浏览器支持是必须的，我们可能要做以下事情： 1. 根据浏览器类型和版本，决定要打哪些补丁。 2. 在补丁完成后，根据用户选择的语言，加载对应的语言包。 3. 现在才能开始我们的程序逻辑部分。
这个函数的伪代码如下：
function main(){
//section 1 if (browser === 'ie'){
ajax_load('/scripts/ie_patch.js')
}
// section 2 if (lang === 'chinese'){
ajax_load('/lang/zh_CN.js')
}
// section 3, the application business}
假设section 1、section 2和section 3是逐级依赖的，即要执行section 3，必须等section 2的代码执行完毕；要执行section 2，则又必须等待section 1执行完成，否则，程序会出错。从伪代码来看，相当简单，对吧？
这里我们使用了一个名为ajax_load的函数，你可以把它当成XMLHttpRequest,或者jQuery的ajax。
问题是，目前没有一个ajax_load可以同步执行(我们先不考虑性能要求)，所以可实现的方案(利用回调)必然是：
function main(){
if (browser === 'ie'){
ajax_load('/scripts/ie_patch.js', on_success = function(response){
if (lang === 'chinese'){
ajax_load('/lang/zh_CN.js', on_success = function(response){
//section 3, the application business }))
}else{
// use default en language //section 3, the application business }
}))
}else{
if (lang === 'chinese'){
ajax_load('/lang/zh_CN.js', on_success = function(response){
// section 3, the application business })
}else{
// use default en language //section 3, the application business }
}
}
上面的代码已经省去了复杂的错误处理。即便这样，这段代码很好地揭示了在存在多个条件判断，又只能通过回调来实现异步调用时，即使只是写上一小段代码也是多么困难，重复和冗余的代码又是如何之多。
Promise的问题
Promise甫一引入时，Javascript程序员就对其寄予了较大的期望。但实际上，Promise对上述问题的改善并不显著。我们使用Promise来改写上述main代码。
这里我们不再使用ajax_load这一伪代码，而是使用现代浏览器都已实现的一个新的API -- fetch。它将返回一个Promise对象。
function main(){
if (browser === 'ie'){
fetch('/script/ie_patch.js').then(response => response.text()).then(script => {
eval(script)
if (lang === 'chinese'){
fetch('/lang/zh_CN.js').then(response => response.json()).then(script =>{
// use script //section 3, the application business })
}
//section 3, the application business })
}
if (lang === 'chinese'){
fetch('/lang/zh_CN.js').then(response => response.json()).then(script =>{
// use script //section 3, the application business })
}
}
当然上面的代码可以做一些优化，即将除fetch之外的代码都写成Promise，这样就可以一路链式调用下去，使用程序看上去是顺序执行的。但整个程序仍然是很复杂的。
为什么引入Promise之后，还会这样呢？本质上，Promise就是一种改写的回调，只不过，这个回调通过then来调用而已。也就是把之前写在异步函数调用体内部的回调逻辑，通过Promise.then改写到了外面了。
我们再来看一小段代码：
a = 0
p = new Promise(function(resolve, reject){
counter = 0
timer = setInterval(function(){
console.info(counter++)
}, 1000)
setTimeout(function(){
a = 5
resolve(a)
clearInterval(timer)
}, 5000)
})
p.then(a=>console.info(`Promise yield${a}`)) //1console.info(`a is${a}outside of Promise`) //2
输出如下：
a is 0 outside of Promise
undefined
0
1
2
3
4
Promise yield 5
我们通过setTimeout来模拟了一个异步函数，并将它封装在一个Promise当中。这个异步函数在启动时触发一个计时器，它将在控制台打印出计数器，每秒输出一个数字。resolve, reject是系统(浏览器)传给我们异步函数的两个信号触发器函数，当你的异步函数已经执行完成，得到结果时，就调用resovle,并且将结果传给这个resolve(再经resolve传递给你,见代码行1)。如果出错，则调用reject来触发错误处理机制。
我们从输出中可以看到，代码并没有顺序执行：当代码执行到行1时，并没有等待结果发生，而是立即去执行行2，结果输出"a is 0 outside of Promise"；然后异步函数开始输出计数器，并在第5秒时，异步函数结束执行，将结果返回给p.then，这样我们就看到了最后一行输出：
Promise yield 5
从上面的实验可以看出，除非所有的代码都书写成Promise，否则，Promise仍然不能改变异步代码的同步执行问题。而且，就算你这样做了，长达数个或者数十个函数的调用链也是看上去很奇怪的一件事。
Async/Await
ES7引入了关键字Async/Await关键字，从根本上解决了这一问题。我们看看MDN对它的介绍：
这正是我们想要的。一方面，我们需要异步(并发)来提高程序性能，另一方面，从程序的逻辑层面来看，事情仍然是遵循因果律的，代码的结构必须看上去是同步的，至于如何实现，应该交给底层去考虑。
定义async函数
async foo(){
console.info("this is an asynchronous function")
return 1
}
foo()
---output---
Promise {: 1}
当我们使用async来修饰一个普通函数时，Javascript引擎将自动将其封装成一个Promise对象，并且其状态是resolved，并且普通函数的返回值就是resolve值。
当然我们也可以在函数中返回一个Promise对象：
async function foo(){
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve('hello world!')
}, 3000)
})
}
foo()
---output---
Promise {}
这时候Javascript引擎将不再进一步封装。这种情况下，函数是否用async关键字修饰是无关紧要的，但为代码便于阅读和理解起见，建议仍然加上这一关键字。
调用
有两种调用方式，一是在async函数中调用另一个async函数，我们一般使用await关键字，这样可以实现代码的同步调用:
async bar(){
let output = await foo()
console.info(`foo() returned${output}3 seconds later`)
}
第一个async函数怎么调用呢，答案是通过Promise.then()来调用，因为async函数的返回值一定是一个Promise对象。
bar().then(()=>console.info("started bar"))
现在我们再来改写最开始的程序，这次代码将清晰很多：
async function main(){
if (browser === 'ie'){
let response = await fetch('/script/ie_patch.js')
let script = await response.text()
eval(script)
}
if (lang === 'chinese'){
let response = await fetch('/lang/zh_CN.js')
let lang = await response.text()
apply_lang(lang)
}
// section 3, start out business here}
// start mainwindow.onload = function(){
main.then(()=>console.info("the application started!")
}
更高级的async用法
等待多个异步调用结果
上面的main例子很好地演示了如何简单地使用系统提供的异步函数，的确很简单易用。 如果我们要等待多个异步调用的结果，直到它们完成再执行下一段，我们还要用到Promise.all:
let results = await Promise.all([
fetch(url1),
fetch(url2),
...
])
错误处理
在Promise语境下，错误处理是通过Promise.catch()来完成的，catch和then混在一起，代码的可读性很差。在async/await语境上，我们象处理普通的异常一样来进行错误处理：
async function bar(){
return new Promise(function(resolve, reject){
setTimeout(function(){
reject("bar failed due to timeout")
}, 5000)
})
}
async function foo(){
try {
await bar()
}catch(e){
console.error("we're rejected by bar")
}
}
看起来async/await很多地方借用了Promise。当你的代码调用reject时，就会抛出一个error，从而被外面的catch捕捉到。
使用外部的resolve, reject
我们前面定义的几个异步函数的例子(这也是大多数文章所引用的)，在实际应用中作用几乎等于零。这是因为，在这些例子当中，异步函数的实际返回值都是当场决定的：
async foo(){
return 1
}
async bar(){
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve("hello world")
})
})
}
函数foo只是纯粹演示语法。如果我们在这一刻就知道函数的结果，又有什么必要使用异步呢？函数bar返回了一个Pending态的promise，但这个promise的resolve仍然要发生成Promise构造器内部，它又能决定什么，以及凭何决定呢(要做出一个resolve所需要的状态很可能在将来才会出现，但在Promise构造时，又只能使用当前可见的变量及状态，并将其生成闭包)。
事实是，对能接触底层的程序员来说，他们能在自己的代码内部实现异步，并且返回Promise对象供上层程序员(应用程序员)通过async/await来调用；而对应用程序员，有可能在复杂的程序中，需要等待多个异步执行的结果，或者对某个异步执行的结果进行运算，并将这种运算封装起来。要完成这样的任务，就必须使用外部的resolve和reject。
回想一下究竟什么是resolve和reject。本质上它们是两个发信号的函数指针，当应用程序调用其中之一时，外面等待绑定的promise的代码就会得到继续执行的信号。因此，我们可以在构造promise对象时，将系统传给我们的resolve,rejct指针保存起来，在代码的其它地方，当条件满足时，再触发promise对象继续执行。
我们使用一个Websocket的例子来讨论。这个例子是通过Websocket来模拟一个远程的RPC调用，即假设远程服务器上有一个search函数:
def search(name: str):
# find user in database by given name
return ...
在javascript当中，我们希望函数是这样的
async function search(name){
let result = await ws.call({
cmd: 'search_by_name',
seq: 'daedfae038-487385afeb'
payload: {
name: 'john'
}
})
console.info(`server returns${result}`)
}
Javascript的websocket是异步的，而且是分两步完成收和发的运作的，因此如果不使用async/await，我们需要这样实现：
function on_search_response(result){
console.info(result)
}
function search(name, callback){
var ws = new WebSocket(url)
ws.send({
cmd: 'search_by_name',
seq: 'daedfae038-487385afeb',
payload: {
name: 'john'
}
})
//receive result ws.on_message = function(msg){
if (msg.data.cmd === 'search_by_name'){
callback(msg.data.payload)
}
}
}
这里我们又掉进了回调陷阱。而且还有一些复杂性我们没有处理，即当我们多次调用search时，服务器并不一定按客户端的调用顺序来返回，因此我们还需要在客户端发出消息前添加序号，在服务器返回结果时再换序号返回结果，这样的回调就更难写了。
现在我们的任务清楚了，我们来看看如何使用async/await以及Promise来封装一个简单的WebSocket库，以实现最简单的RPC call功能。
function WsClient (serviceUrl) {
// eventName => Set(handlers) let registry = {}
let pending_calls = {}
let connected = false
let timestamp = Date.now()
let ws = new WebSocket(serviceUrl)
ws.onmessage = function (event) {
console.debug(`Received msg:${event.data}`)
// WebSocket passing event as ... let msg = JSON.parse(event.data)
// msg now contains __seq__, name and payload if (!msg.name){
console.error(`Malformed msg${msg}`)
}
// handle RPC call first. RPC call is one sent by us, and wait for response. if (msg.__seq__ && pending_calls[msg.__seq__]) {
// line 1 let resolve = pending_calls[msg.__seq__].resolve
delete pending_calls[msg.__seq__]
return resolve(msg)
}
// call each handler let handlers = registry[msg.name]
if (handlers) {
handlers.forEach(function (func) {
func(msg)
})
}
}
ws.onopen = function (event) {
console.info('connected with server')
let handlers = registry['Open']
connected = true
if (handlers) {
handlers.forEach(function (handler) {
handler(event)
})
}
}
ws.onclose = function (event) {
console.info('disconnected with server')
let handlers = registry['Close']
connected = false
if (handlers) {
handlers.forEach(function (handler) {
handler(event)
})
}
}
function on (event, handler) {
/*** handler is callable(msg)* @type {*|Set}*/
let handlers = registry[event] || new Set()
handlers.add(handler)
registry[event] = handlers
}
function removeHandler (event, handler) {
let handlers = registry[event]
if (!handlers) {
return
}
handlers.delete(handler)
registry[event] = handlers
}
function send (msg) {
ws.send(JSON.stringify(msg))
}
async function call (msg) {
let __seq__ = guid()
msg.__seq__ = __seq__
// line 2 let promise = new Promise(function (resolve, reject) {
pending_calls[__seq__] = {
resolve: resolve,
reject: reject
}
setTimeout(function () {
delete pending_calls[__seq__]
reject(`${msg.name}:${__seq__}failed due to timeout`)
}, 20 * 1000)
})
ws.send(JSON.stringify(msg))
return promise
}
return {
on: on,
removeHandler: removeHandler,
send: send, /*send(msg)*/
call: call,/*async call(msg)*/
isConnected: function () {return connected}
}
}
代码较多，但紧要处只有两行。
一是(line 2)在ws.call被调用时，我们生成一个Promise对象，将构造Promise对象时，系统传入的resolve, reject存入pending_calls队列:
// line 2let promise = new Promise(function (resolve, reject) {
pending_calls[__seq__] = {
resolve: resolve,
reject: reject
}
setTimeout(function () {
//防止网络不可达或者其它错误，避免程序死等。 delete pending_calls[__seq__]
reject(`${msg.name}:${__seq__}failed due to timeout`)
}, 20 * 1000)
})
然后call函数返回一个未决的Promise对象，当后面我们调用await ws.cal()时，实际上就是在等待这个对象发出信号。由于resolve指针已经被保存起来了，因此，我们可以在稍后的另一个场景中，当条件满足时，来决定函数如何返回。这里有两种情况，一是如果超时后，我们reject掉这个请求；二是当on_message收到具有同样的seq的消息时，将消息内容返回，这就是line 1的作用：
if (msg.__seq__ && pending_calls[msg.__seq__]) {
// line 1 let resolve = pending_calls[msg.__seq__].resolve
delete pending_calls[msg.__seq__]
//唤醒promise对象 return resolve(msg)
}
结论
现在你可以使用async/await关键字来重写你的代码，使得它们按代码顺序执行，从而有更好的可读性。async函数本质上是一个Promise，它通过Promise的resolve、reject机制来唤醒。
async函数通过await来调用，或者(既然它是一个Promise)通过then()来调用，后者主要用于async/await链的起始函数的调用。一旦在函数中使用了await关键字，函数就必须声明为async的，而且调用该函数的函数也必须声明成为async。否则，传递链将失效。
要在自己封装的库里用好async/await这一机制，就要使用外部的resolve/reject。本文给出了一个封装WebSocket以实现RPC的例子。
2804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
