在javascript单线程的世界里,没有异步寸步难行。本章节介绍异步编程的发展,从callback
,Events
到promise
,generator
,async/await
.
为什么要使用异步编程
在(javascript)单线程的世界里,如果有多个任务,就必须排队,前面一个完成,再继续后面的任务。就像一个ATM排队取钱似的,前面一个不取完,就不让后面的取。 为了这个问题,javascript提供了2种方式: 同步和异步。 异步就像银行取钱填了单子约了号,等着叫到号,再去做取钱,等待的时间里还可以干点其他的事儿~
异步回调带来的问题
回调地狱 (Callbacks Hell)
举个例子:通过api拿到数据,数据里面有图片,图片加载成功渲染,那么代码如下:
// 伪代码
request(url, (data) => {
if(data){
loadImg(data.src, () => {
render();
})
}
})
如果有在业务逻辑比较复杂或者NodeJS I/O操作比较频繁的时候,就成了下面这个样子:
doSth1((...args, callback) => {
doSth2((...args, callback) => {
doSth3((...args, callback) => {
doSth4((...args, callback) => {
doSth5((...args, callback) => {
})
})
})
})
})
这样的维护性
和可读性
,整个人瞬间感觉不好了~
异常处理
try {
setTimeout(() => {
throw new Error('unexpected error');
}, 100);
} catch (e) {
console.log('error2', e.message);
}
以上代码运行抛出异常,但try catch不能得到未来时间段的异常。
流程控制不方便
流程控制只能通过维护各种状态
来处理,不利于管理
异步编程现有解决方案对比
事件机制
不管浏览器还是NodeJS,提供了大量内置事件API来处理异步。
事件监听
浏览器中如: websocket
, ajax
, canvas
, img
,FileReader
等
NodeJS如: stream
, http
等
自定义事件(本质上是一种发布订阅模式)
- NodeJS中的
EventEmitter
事件模型 - 浏览器中:如DOM可使用
addEventListener
,此外浏览器也提供一些自定义事件的API,但兼容性不好,具体可以这篇文章;也可以用Node中的EventEmitter
;jquery
中也对此做了封装,on
,bind
等方法支持自定义事件。
事件小结
事件一定程度上解决了解耦
和提升了代码可维护性
;对于异常处理
,只有部分支持类似error事件
才能处理。若想实现异常处理机制,只有自己模拟error事件,比较繁琐。
Promise
Promise严格来说不是一种新技术,它只是一种机制,一种代码结构和流程,用于管理异步回调。为了统一规范产生一个Promise/A+规范,点击查看Promise/A+中文版,cnode的William17
实现了Promise/A+规范,有兴趣的可以点这里查看
promise
状态由内部控制,外部不可变- 状态只能从
pending
到resovled
,rejected
,一旦进行完成不可逆 - 每次
then/catch
操作返回一个promise实例,可以进行链式操作
readFile(path1).then(function (data) {
console.log(data.toString());
return readFile(path2);
}).then(function (data) {
console.log(data.toString());
return readFile(errorPath);
}).then(function (data) {
console.log(data.toString());
}).catch(function (e) {
console.log('error', e);
return readFile(path1);
}).then(function (data) {
console.log(data.toString());
});
Promise的缺陷:
- 内部抛出错误只能通过
promise.catch
才能才能接收到 - 语义不明确
Generator
generator介绍
Generator是ES6提供的方法,是生成器,最大的特点:可以暂停执行和恢复执行(可以交出函数的执行权),返回的是指针对象
.
- 需要自执行函数才能持续运行,否则需要手工调用流程
- 自执行函数借助promise, 获取异常和最终结果
generator 和 promise自执行实现
const run = function (generator) {
var g = generator()
var perform = function (result) {
if (result.done === true) {
return result.value
}
if (isPromise(result.value)) {
return result.value.then(function (v) {
return perform(g.next(v))
}).catch(function (e) {
return perform(g.throw(e))
})
} else {
return perform(g.next(result.value))
}
}
return perform(g.next())
}
const isPromise = f => f.constructor === Promise
function* g() {
var a = yield sleep(1000, _ => 1)
var b = yield sleep(1000, _ => 2)
return a + b
}
function sleep(d, fn) {
return new Promise((resolve, reject) => {
setTimeout(_ => resolve(fn()), d)
})
}
由于以上问题,于是一个叫 co库诞生,支持thunk
和Promise
.
关于thunk可以查看阮一峰老师的thunk介绍和应用
Async/Await
ES7提供了async
函数,使得异步操作变得更加方便。
- 内置执行器
- 更好的语义
- 更多的实用场景,co参数Generator函数中
yield
只能是promise
和thunk
实例代码:
async function asyncReadFile() {
var p1 = readFile(path.join(__dirname, '../data/file1.txt'));
var p2 = readFile(path.join(__dirname, '../data/file2.txt'));
var [f1, f2] = await Promise.all([p1, p2]);
return `${f1.toString()}\n${f2.toString()}`;
}
(async function () {
try {
console.log(await asyncReadFile());
} catch (e) {
console.log(e.message)
}
})();
Node8 async/await 支持
Node8.0
发布,全面支持 async/await
, 推荐使用 async/await
, 低版本node可以使用 babel
来编译处理。 而 为了方便 接口设计时 返回 promise
更方面使用者. 当然依然使用 callback
, 通过 promisify
做转换, Node8.0
已经内置 util.promisify
方法。
参考资料
小结
异步编程
在javascript中扮演者重要的角色,虽然现在需要通过babel
,typescript
等编译或转换代码,跟着规范
和标准
走,就没有跑偏。
好久之前在github博客上的文章了。
如需转载,请备注出处。