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那样一致的毛病处置惩罚商定，题目会变得越发贫苦。
几种处理计划
下面临几种处理计划的议论重要集中于上面提到的两个中心题目上，固然也会斟酌其他方面的因夙来评判其优瑕玷。
Async.js
首先是Node中异常有名的Async.js，这个库能够在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/A+。运用Promise来举行异步流程掌握，有几个须要注重的题目，
在We have a problem with promises一文中有很好的总结。
把前面提到的功用用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。
现在处于提案阶段的async function还没有获得任何浏览器或Node.JS/io.js的支撑。
Babel转码器也须要翻开试验选项，而且关于不支撑Generator的浏览器来讲，
还须要引进一层厚厚的regenerator runtime，想在前端临盆环境获得运用还须要时候。
参考
1. A Study on Solving Callbacks with JavaScript Generators
5. We have a problem with promises
