JavaScript异步编程解决方案笔记

阅读量：6833 次

发布时间：2019-06-26

本文共 4940 字，大约阅读时间需要 16 分钟。

JavaScript 异步编程解决方案笔记

最近读了朴灵老师的《深入浅出NodeJS》中《异步编程》一章，并参考了一些有趣的文章。

在此做个笔记，记录并巩固学到的知识。

JavaScript异步编程的两个核心难点

异步I/O、事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络、文件访问功能，

且使之在后端实现了较高的性能。然而异步风格也引来了一些麻烦，其中比较核心的问题是：

函数嵌套过深

JavaScript的异步调用基于回调函数，当多个异步事务多级依赖时，回调函数会形成多级的嵌套，代码变成

金字塔型结构。这不仅使得代码变难看难懂，更使得调试、重构的过程充满风险。

异常处理

回调嵌套不仅仅是使代码变得杂乱，也使得错误处理更复杂。

异步编程中可能抛出错误的情况有两种：

异步函数错误

由于异步函数是立刻返回的，异步事务中发生的错误是无法通过try-catch来捕捉的，只能采用由调用方提供错误处理回调的方案来解决。

例如Node中常见的function (err, ...) {...}回调函数，就是Node中处理错误的约定：

即将错误作为回调函数的第一个实参返回。

再比如HTML5中FileReader对象的onerror函数，会被用于处理异步读取文件过程中的错误。

回调函数错误

由于回调函数执行时，异步函数的上下文已经不存在了，通过try-catch无法捕捉回调函数内的错误。

可见，异步回调编程风格基本上废掉了try-catch和throw。另外回调函数中的return也失去了意义，这会使我们的程序必须依赖于副作用。

这使得JavaScript的三个语义失效，同时又得引入新的错误处理方案，如果没有像Node那样统一的错误处理约定，问题会变得更加麻烦。

几种解决方案

下面对几种解决方案的讨论主要集中于上面提到的两个核心问题上，当然也会考虑其他方面的因素来评判其优缺点。

首先是Node中非常著名的，这个库能够在Node中展露头角，恐怕也得归功于Node统一的错误处理约定。

而在前端，一开始并没有形成这么统一的约定，因此使用Async.js的话可能需要对现有的库进行封装。

Async.js的其实就是给回调函数的几种常见使用模式加了一层包装。比如我们需要三个前后依赖的异步操作，采用纯回调函数写法如下：

asyncOpA(a, b, (err, result) => {	if (err) {		handleErrorA(err);	}	asyncOpB(c, result, (err, result) => {		if (err) {			handleErrorB(err);		}		asyncOpB(d, result, (err, result) => {			if (err) {				handlerErrorC(err);			}			finalOp(result);		});	});});

如果我们采用async库来做：

async.waterfall([	(cb) => {		asyncOpA(a, b, (err, result) => {			cb(err, c, result);		});	},	(c, lastResult, cb) => {		asyncOpB(c, lastResult, (err, result) => {			cb(err, d, result);		})	},	(d, lastResult, cb) => {		asyncOpC(d, lastResult, (err, result) => {			cb(err, result);		});	}], (err, finalResult) => {	if (err) {		handlerError(err);	}	finalOp(finalResult);});

可以看到，回调函数由原来的横向发展转变为纵向发展，同时错误被统一传递到最后的处理函数中。

其原理是，将函数数组中的后一个函数包装后作为前一个函数的末参数cb传入，同时要求：

每一个函数都应当执行其cb参数;

cb的第一个参数用来传递错误。

我们可以自己写一个async.waterfall的实现：

let async = {	waterfall: (methods, finalCb = _emptyFunction) => {		if (!_isArray(methods)) {			return finalCb(new Error('First argument to waterfall must be an array of functions'));		}		if (!methods.length) {			return finalCb();		}		function wrap(n) {			if (n === methods.length) {				return finalCb;			}			return function (err, ...args) {				if (err) {					return finalCb(err);				}				methods[n](...args, wrap(n + 1));			}		}		wrap(0)(false);	}};

Async.js还有series/parallel/whilst等多种流程控制方法，来实现常见的异步协作。

Async.js的问题是：

在外在上依然没有摆脱回调函数，只是将其从横向发展变为纵向，还是需要程序员熟练异步回调风格。

错误处理上仍然没有利用上try-catch和throw，依赖于“回调函数的第一个参数用来传递错误”这样的一个约定。

Promise方案

ES6的Promise来源于。使用Promise来进行异步流程控制，有几个需要注意的问题，

在一文中有很好的总结。

把前面提到的功能用Promise来实现，需要先包装异步函数，使之能返回一个Promise：

function toPromiseStyle(fn) {	return (...args) => {		return new Promise((resolve, reject) => {			fn(...args, (err, result) => {				if (err) reject(err);				resolve(result);			})		});	};}

这个函数可以把符合下述规则的异步函数转换为返回Promise的函数：

回调函数的第一个参数用于传递错误，第二个参数用于传递正常的结果。

接着就可以进行操作了：

let [opA, opB, opC] = [asyncOpA, asyncOpB, asyncOpC].map((fn) => toPromiseStyle(fn));opA(a, b)	.then((res) => {		return opB(c, res);	})	.then((res) => {		return opC(d, res);	})	.then((res) => {		return finalOp(res);	})	.catch((err) => {		handleError(err);	});

通过Promise，原来明显的异步回调函数风格显得更像同步编程风格，我们只需要使用then方法将结果传递下去即可，同时return也有了相应的意义：

在每一个then的onFullfilled函数（以及onRejected）里的return，都会为下一个then的onFullfilled函数（以及onRejected）的参数设定好值。

如此一来，return、try-catch/throw都可以使用了，但catch是以方法的形式出现，还是不尽如人意。

Generator方案

ES6引入的Generator可以理解为可在运行中转移控制权给其他代码，并在需要的时候返回继续执行的函数。利用Generator可以实现协程的功能。

将Generator与Promise结合，可以进一步将异步代码转化为同步风格：

function* getResult() {	let res, a, b, c, d;	try {		res = yield opA(a, b);		res = yield opB(c, res);		res = yield opC(d);		return res;	} catch (err) {		return handleError(err);	}}

然而我们还需要一个可以自动运行Generator的函数：

function spawn(genF, ...args) {	return new Promise((resolve, reject) => {		let gen = genF(...args);				function next(fn) {			try {				let r = fn();				if (r.done) {					resolve(r.value);				}				Promise.resolve(r.value)					.then((v) => {						next(() => {							return gen.next(v);						});					}).catch((err) => {						next(() => {							return gen.throw(err);						})					});			} catch (err) {					reject(err);			}		}				next(() => {			return gen.next(undefined);		});	});}

用这个函数来调用Generator即可：

spawn(getResult)	.then((res) => {		finalOp(res);	})	.catch((err) => {		handleFinalOpError(err);	});

可见try-catch和return实际上已经以其原本面貌回到了代码中，在代码形式上也已经看不到异步风格的痕迹。

类似的功能有/等库实现。

ES7的async/await

ES7中将会引入async function和await关键字，利用这个功能，我们可以轻松写出同步风格的代码，

同时依然可以利用原有的异步I/O机制。

采用async function，我们可以将之前的代码写成这样：

async function getResult() {	let res, a, b, c, d;	try {		res = await opA(a, b);		res = await opB(c, res);		res = await opC(d);		return res;	} catch (err) {		return handleError(err);	}}getResult();

和Generator & Promise方案看起来没有太大区别，只是关键字换了换。

实际上async function就是对Generator方案的一个官方认可，将之作为语言内置功能。

async function的缺点是：

await只能在async function内部使用，因此一旦你写了几个async function，

或者使用了依赖于async function的库，那你很可能会需要更多的async function。