(滴滴、挖财、微医、海康)JS 异步解决方案的发展历程以及优缺点
个人题解
- callback->promise->generator/yield->async/await
callback (最初的方案)
最开始使用的是callback,比如浏览器端的dom事件,ajax.node上的io事件等等,但是有定位问题困难,callback hell,异常处理等问题
1 2 3 4 5 6 7 8 9 10 11 12
| document.getElementById('btn').addEventListener('click',function(e){ })
fs.readFile('path',function(err,res)=>{ if(err){ return } })
|
promise
相比callback的回调写法,链式调用的写法更优雅,异常处理变得友好.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| const demo = function () { return new Promise((resolve, reject) => { setTimeout(() => { resolve("something"); }, 1000); }); };
demo() .then((res) => { console.log(res); return res + "then"; }) .then((res) => { console.log(res); throw new Error("err"); }) .catch((err) => { console.log(err.message); });
|
generator/yield
用的不多,不做评价.emmm 打扰了
async/await
异步终极解决方案,generator/yield语法糖,基于promise,同步的写法,同步代码的异常捕获能力.强!无敌!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| const demo = function () { return new Promise((resolve, reject) => { setTimeout(() => { resolve("something"); }, 1000); }); };
async function test() { try { let res = await demo(); console.log(res); throw new Error("error"); } catch (e) { console.log(e); } } test();
|
最高赞题解
JS 异步已经告一段落了,这里来一波小总结
1. 回调函数(callback)
setTimeout(() => {
// callback 函数体
}, 1000)
缺点:回调地狱,不能用 try catch 捕获错误,不能 return
回调地狱的根本问题在于:
- 缺乏顺序性: 回调地狱导致的调试困难,和大脑的思维方式不符
- 嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身,即(控制反转)
- 嵌套函数过多的多话,很难处理错误
1 2 3 4 5 6 7 8 9
| ajax('XXX1', () => { ajax('XXX2', () => { ajax('XXX3', () => { }) }) })
|
优点:解决了同步的问题(只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。)
2. Promise
Promise就是为了解决callback的问题而产生的。
Promise 实现了链式调用,也就是说每次 then 后返回的都是一个全新 Promise,如果我们在 then 中 return ,return 的结果会被 Promise.resolve() 包装
优点:解决了回调地狱的问题
1 2 3 4 5 6 7 8 9 10
| ajax('XXX1') .then(res => { return ajax('XXX2') }).then(res => { return ajax('XXX3') }).then(res => { })
|
缺点:无法取消 Promise ,错误需要通过回调函数来捕获
3. Generator
特点:可以控制函数的执行,可以配合 co 函数库使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| function *fetch() { yield ajax('XXX1', () => {}) yield ajax('XXX2', () => {}) yield ajax('XXX3', () => {}) } let it = fetch() let result1 = it.next() let result2 = it.next() let result3 = it.next() ``` ### 4. Async/await async、await 是异步的终极解决方案
优点是:代码清晰,不用像 Promise 写一大堆 then 链,处理了回调地狱的问题
缺点:await 将异步代码改造成同步代码,如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。 ```javascript async function test() { await fetch('XXX1') await fetch('XXX2') await fetch('XXX3') }
|
下面来看一个使用 await 的例子:
let a = 0
let b = async () => {
a = a + await 10
console.log('2', a)
}
b()
a++
console.log('1', a)
对于以上代码你可能会有疑惑,让我来解释下原因
首先函数 b 先执行,在执行到 await 10 之前变量 a 还是 0,因为 await 内部实现了 generator ,generator 会保留堆栈中东西,所以这时候 a = 0 被保存了下来
因为 await 是异步操作,后来的表达式不返回 Promise 的话,就会包装成 Promise.reslove(返回值),然后会去执行函数外的同步代码
同步代码执行完毕后开始执行异步代码,将保存下来的值拿出来使用,这时候 a = 0 + 10
上述解释中提到了 await 内部实现了 generator,其实 await 就是 generator 加上 Promise的语法糖,且内部实现了自动执行 generator。如果你熟悉 co 的话,其实自己就可以实现这样的语法糖。
本文首发于我的博客:JS异步解决方案的发展历程以及优缺点
相关链接
文章链接
最高赞作者github
最高赞作者地址 JS异步解决方案的发展历程以及优缺点
阮一峰 Javascript异步编程的4种方法