javascript异步编程之generator(生成器函数)与asnyc/await语法糖
Generator 异步方案
相比于传统回调函数的方式处理异步调用,Promise
最大的优势就是可以链式调用解决回调嵌套的问题。但是这样写依然会有大量的回调函数,虽然他们之间没有嵌套,但是还是没有达到传统同步代码的可读性。如果以下面的方式写异步代码,它是很简洁,也更容易阅读的。
// like sync mode
try{
const value1 = ajax('/api/url1')
console.log(value1)
const value2 = ajax('/api/url1')
console.log(value2)
const value3 = ajax('/api/url1')
console.log(value3)
const value4 = ajax('/api/url1')
console.log(value4)
const value5 = ajax('/api/url1')
console.log(value5)
}catch(err){
console.log(err)
}
在ES2015
提供了生成器函数(Generator Function)
它与普通函数的语法差别在于,在function
语句之后和函数名之前,有一个“*”作为生成器函数的标示符。
在我们去调用生成器函数的时候他并不会立即去执行这个函数,而是会得到一个生成器对象,直到我们手动调用对象的next
方法,函数体才会开始执行,我们可以使用关键字yield
去向外返回一个值,我们可以在next
方法的返回值中去拿到这个值。另外再返回的属性中还有一个done
关键字来表示生成器是否执行完了,
yield
不会像return
一样去结束函数的执行,只是暂停函数的执行,直到外接下一次调用next
方法时才会继续从yield
位置往下执行
function * foo () {
console.log('start')
yield 'foo'
}
const generator = foo()
const result = generator.next()
调用next
方法的时候传入了参数的话,所传入的参数会作为yield
关键字的返回值
function * foo () {
console.log('start')
// 我可以在这里接收next传入的参数
const res = yield 'foo'
console.log(res) // 这是我传入的参数
}
const generator = foo()
const result = generator.next('这是我传入的参数')
console.log(result) // { value: 'foo', done: false }
如果我们调用了生成器函数的throw
方法,这个方法会给生成器函数内部抛出一个异常
function * foo () {
console.log('start')
// 我可以在这里接收next传入的参数
try {
const res = yield 'foo'
console.log(res) // 这是我传入的参数
} catch (err) {
console.log(err.message) // 抛出错误
}
}
const generator = foo()
const result = generator.next('这是我传入的参数')
console.log(result)
generator.throw(new Error('抛出错误'))
利用生成器函数和Promise
来实现异步编程的体验
function ajax(url) {
return new Promise((resove, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('GET', url)
// 新方法可以直接接受一个j对象
xhr.responseType = 'json'
xhr.onload = function () {
if (this.status === 200) {
resove(this.response)
} else {
reject(new Error(this.statusText))
}
}
xhr.send()
})
}
function* main() {
const user1 = yield ajax('/json1.json')
console.log(user1)
const user2 = yield ajax('/json2.json')
console.log(user2)
const user3 = yield ajax('/json3.json')
console.log(user3)
}
const g = main()
const result = g.next()
result.value.then(data => {
const result2 = g.next(data)
if (result2.done) return
result2.value.then(data2 => {
const result3 = g.next(data2)
if (result3.done) return
result3.value.then(data3 => {
g.next(data3)
})
})
})
很明显生成器的执行器可以使用递归的方式去调用
const g = main()
function handleResult(result) {
if (result.done) return
result.value.then(data => {
handleResult(g.next(data))
}, err => {
g.throw(err)
})
}
handleResult(g.next())
生成器函数的调用其实都是差不多的,所以我们可以写一个比较通用的执行器
function co(generator) {
const g = generator()
function handleResult(result) {
if (result.done) return
result.value.then(data => {
handleResult(g.next(data))
}, err => {
g.throw(err)
})
}
handleResult(g.next())
}
co(main)
当然这样的执行器在社区中已经有一个比较完善的库了co。这种co
的方案在2015
年之前是特别流行的,后来在出了async/await
语法糖之后,这种方案相对来讲就没有那么普及了。使用generator
这种方法最明显的变化就是异步调用回归到扁平化了
async/await
有了generator
之后js
异步编程基本上与同步代码有类似的体验了,但是使用generator
这种异步方案还需要自己手动去写一个执行器函数,会比较麻烦。在ES2017
的版本中新增了一个叫做async
的函数,它同样提供了这种扁平化的编程体验,并且是语言层面的标准的异步编程语法。其实async
函数就是生成器函数更方便的语法糖,所以语法上给generator
函数是类似的。
async function main() {
try {
const user1 = await ajax('/json1.json')
console.log(user1)
const user2 = await ajax('/json2.json')
console.log(user2)
const user3 = await ajax('/json3.json')
console.log(user3)
} catch (error) {
console.log(error)
}
}
main()
async
函数返回一个Promise
对象,更利于对整体代码控制
promise.then(() => {
console.log('all completed')
}).catch(err => {
console.log(err)
})
原文地址: https://kspf.xyz/archives/21
更多内容微信公众号搜索充饥的泡饭
小程序搜一搜开水泡饭的博客
javascript异步编程之generator(生成器函数)与asnyc/await语法糖的更多相关文章
- 异步编程之Generator(1)——领略魅力
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- Javascript异步编程之setTimeout与setInterval详解分析(一)
Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...
- 异步编程之Generator(2)——剖析特性
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- 【转】Javascript异步编程之setTimeout与setInterval
Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...
- (翻译)异步编程之Promise(1):初见魅力
原文:https://www.promisejs.org/ by Forbes Lindesay 异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2) ...
- 异步编程之Promise(3):拓展进阶
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- 异步编程之Promise(2):探究原理
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- 异步编程之co——源码分析
异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
随机推荐
- React报错之Type '() => JSX.Element[]' is not assignable to type FunctionComponent
正文从这开始~ 总览 当我们尝试从函数组件中返回元素组成的数组时,会产生"Type '() => JSX.Element[]' is not assignable to type Fu ...
- Python逆向爬虫之pyquery,非常详细
系列目录 Python逆向爬虫之pyquery pyquery是一个类似jquery的python库,它实现能够在xml文档中进行jQuery查询,pyquery使用lxml解析器进行快速在xml和h ...
- net::ERR_BLOCKED_BY_CLIENT 错误导致页面加载不出来
AdBlock 禁止广告的插件屏蔽你的网络请求,屏蔽了一些重要的文件,导致页面加载不出来. 解决方案: 1.修改资源文件的名称,把ad替换成其他字符: 2.关闭广告拦截器: 3.广告拦截器设置白名单.
- html网页乱码原因以及解决办法
一.乱码造成原因 1.如果网页源代码是gbk编写的,而内容中的文字是utf-8的,那么,此时打开浏览器就会出现HTML乱码.反之也会出现乱码. 2.HTML网页编码是gbk,但是程序从程序库中调出呈现 ...
- 【C++】实现D3D9 的 Inline hook
[C++]实现D3D9 的 Inline hook 简单介绍一下HOOK原理: 函数调用的过程大致是 先push 参数 进去,再执行 call 函数地址 ,进入函数.此时将所调用的函数的前五个字节 ...
- 【java】学习路径23-拆箱与装箱
拿Integer类型和int类型来举例子. 装箱,基本给引用.下面的代码相当于Integer i_test = Integer.valueOf("100"); 注意!过程是自动的. ...
- C# Parallel类For循环与普通For循环耗时性能比较
1 static void Main(string[] args) 2 { 3 var dt = DateTime.Now; 4 var rand = new Random(DateTime.Now. ...
- 强扩展、强一致、高可用…GaussDB成为游戏行业的心头爱
摘要:看GaussDB for Redis强扩展.高可用.强一致.高安全,如何玩转各大游戏场景 本文分享自华为云社区<GaussDB为什么成为游戏行业的心头爱?>,作者: GaussDB ...
- MySQL到底有没有解决幻读问题?这篇文章彻底给你解答
MySQL InnoDB引擎在Repeatable Read(可重复读)隔离级别下,到底有没有解决幻读的问题? 网上众说纷纭,有的说解决了,有的说没解决,甚至有些大v的意见都无法达成统一. 今天就深入 ...
- Linux下进行Oracle数据库安装
一般来说我们Windows下进行安装Oracle都很简单,但Linux下却要输入很多命令,以下的安装步骤是本人经过多次安装Linux下的Oracle经验,希望能帮到大家 一.在Linux服务器上创建o ...