JavaScript中async与await实现原理与细节
一、回调地狱
在es6兴起之后许多人都开始使用promise，promise目的是解决es5中的回调地狱（callback hell），那么什么是回调地狱呢？先来提一个需求，现在需要发送n个request请求，第二个请求参数需要第一个请求的结果，第三个请求的参数需要第二个请求的结果，以此类推... ，在没有promise的条件下，我们不难使用callback写出如下的代码：
function ajax(url, callback) {
setTimeout(() => {
callback(Math.random() + url)
}, 1000);
}
function request() {
ajax('url1', (res1 => {
ajax(`url2?random=${res1}`, (res2) => {
ajax(`url3?random=${res2}`, (res3) => {
ajax(`url4?random=${res3}`, (res4) => {
// do something
})
})
})
}))
}
request()二、Promise
这样确实能实现我们的需求，但是这样子的代码有什么缺点呢？不难看出我们的request函数越来越像个三角形 ，代码集中在上部分，下半部分全都是我们的括号，代码阅读性极差！ 这时候我们的promise应运而生了，使用promise我们可以这样重构我们的代码如下：
function ajax(url) {
return new Promise(resolve => {
setTimeout(() => {
resolve(Math.random() + url)
}, 1000);
})
}
function request() {
ajax('url1').then(res1 => {
ajax(`url2?random=${res1}`).then((res2) => {
ajax(`url3?random=${res2}`).then((res3) => {
ajax(`url4?random=${res3}`).then((res4) => {
// do something
})
})
})
})
}
request()肯定有人说，这不还是像个三角形吗？这样使用promise有什么意义呢？此时我们可以借助promise的链式调用重构成下面这样：
function ajax(url) {
return new Promise(resolve => {
setTimeout(() => {
resolve(Math.random() + url)
}, 1000);
})
}
function request() {
ajax('url1').then(res1 => {
return ajax(`url2?random=${res1}`)
}).then(res2 => {
return ajax(`url3?random=${res2}`)
}).then(res3 => {
return ajax(`url4?random=${res3}`)
}).then(res4 => {
// do something
})
}
request()相对于之前的回调地狱，此时我们的代码是不是比较清晰了。但是！这还不够！这看上去还不够直观。我们想要的是阅读异步代码，类似于阅读同步代码的方式一样方便。
三、生成器（generator）
生成器是es6新增的语法，它是一个特殊的迭代器，它可以用来暂停我们函数的执行！这个功能非常强大！ 生成器的语法是，在声明函数时在后面增加一个 * 号，那么这个函数就是生成器函数，直接调用该函数得到的是一个生成器句柄，该生成器是不会执行的，必须要调用生成器句柄的next()方法后，生成器才会执行，并且执行到我们的yield处（如果存在yield就执行到第一个yield，不存在则直接执行完毕）,该方法的返回值一个对象，结构是 {done: true/false, value: 我们yield后面跟的值} ，如果执行到该生成器函数末尾则 done为true。 关于生成器的知识可以点此JavaScript中的迭代器和可迭代对象与生成器
function* foo() {
console.log('======');
const a = yield 1;
console.log('a',a);
}
const g = foo()
console.log('11111111')
const res1 = g.next()
console.log(res1)
const res2 = g.next('22222')
console.log(res2)上面代码打印顺序为：
11111111
======
{done: false, value: 1}
'a','22222'
{done: true, value: undefined}
细心的你一定看出了，我们在next方法中传的参数会赋值给生成器函数中的yield 左侧，并可以在生成器中拿到这个值后进行使用。
四、使用生成器同步化promise
掌握了生成器的知识我们就可以使用生成器来将我们的promise链式调用进行重构如下：
function ajax(url) {
return new Promise(resolve => {
setTimeout(() => {
resolve(Math.random() + url)
}, 1000);
})
}
function* request() {
const res1 = yield ajax('url1')
const res2 = yield ajax(`url2?random=${res1}`)
const res3 = yield ajax(`url3?random=${res2}`)
const res4 = yield ajax(`url4?random=${res3}`)
// do something
console.log(res4);
}
// 开始调用我们的生成器
const generator = request();
generator.next().value.then(res1 => {
generator.next(res1).value.then(res2 => {
generator.next(res2).value.then(res3 => {
generator.next(res3).value.then(res4 => {
generator.next(res4)
})
})
})
})可以看到我们的生成器还是三角形，优化一下成链式调用如下：
generator.next().value.then(res1 => {
return generator.next(res1).value
}).then(res2 => {
return generator.next(res2).value
}).then(res3 => {
return generator.next(res3).value
}).then(res4 => {
generator.next(res4)
})此时，我们的主函数已经非常像同步代码了，但是缺点是我们目前必须手动调用该生成器，并且request主函数里面我们不知道有多少次yield调用，因此我们的生成器也不能手动调用多次，这时，我们将该生成器调用代码进行重构，重构成可以自动执行我们的生成器的函数，不需要关心request内部有多少次yield使用，重构如下：
function ajax(url) {
return new Promise(resolve => {
setTimeout(() => {
resolve(Math.random() + url)
}, 1000);
})
}
function* request() {
const res1 = yield ajax('url1')
const res2 = yield ajax(`url2?random=${res1}`)
const res3 = yield ajax(`url3?random=${res2}`)
const res4 = yield ajax(`url4?random=${res3}`)
// do something
console.log(res4);
}
function execGenerator(generatorFn) {
const generator = generatorFn();
function exec(res) {
const { done, value } = generator.next(res)
if (!done) {
value.then(exec)
}
}
exec()
}
execGenerator(request)我们增加了一个自动执行函数execGenerator，该函数接受一个生成器参数，并且在内部自动进行递归调用，直至返回值的 done 属性为 true，此时我们的使用方式只需要定义一个request生成器函数，并且执行一下我们的自动执行函数 execGenerator ，我们的request就能像同步代码一样盘跑起来了，并且看起来非常直观。
五、async、await异步代码究极解决方案
其实async与await是我们上面生成器的语法糖而已，在内部做的事情跟我们使用生成器做的事情是一样的，使用方式如下：
function ajax(url) {
return new Promise(resolve => {
setTimeout(() => {
resolve(Math.random() + url)
}, 1000);
})
}
async function request() {
const res1 = await ajax('url1')
const res2 = await ajax(`url2?random=${res1}`)
const res3 = await ajax(`url3?random=${res2}`)
const res4 = await ajax(`url4?random=${res3}`)
// do something
console.log(res4);
}看起来是不是跟我们的生成器request函数非常类似呢？使用async与await可以让我们省去写execGenerator函数的步骤，更加方便了我们的开发！
到此这篇关于JavaScript中async与await实现原理与细节的文章就介绍到这了,更多相关JS 中async与await 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了详解js正则表达式验证时间格式xxxx-xx-xx形式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了JavaScript中判断整数的多种方法总结,本文总结了5种判断整数的方法,如取余运算符判断、Math.round、Math.ceil、Math.floor判断等,需要的朋友可以参考下2014-11-11
这篇文章主要为大家详细介绍了javascript实现电商放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
对表单域中的数据进行校验的时候,其中有一项比较特殊,不是简单的输入框,下拉框这些表单元素,而是自己写的一个el-table的选择弹窗,本文给大家介绍element-ui的表单验证如何清除校验提示语,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要为大家详细介绍了微信小程序时间选择插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
本篇文章主要是对javascript中的按键事件进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
下面小编就为大家带来一篇javascript实现简易计算器的代码小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件，本文给大家重点介绍js中的事件委托及好处，一起看看吧2016-07-07
这篇文章主要介绍了js实现多图左右切换功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
本篇文章主要是对JS获取下拉列表所选中的TEXT和Value的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论