JavaScript异步编程:Generator与Async

JavaScript异步编程:Generator与Async

Promise开始,JavaScript就在引入新功能,来帮助更简单的方法来处理异步编程,帮助我们远离回调地狱。 Promise是下边要讲的Generator/yieldasync/await的基础,希望你已经提前了解了它。

在大概ES6的时代,推出了Generator/yield两个关键字,使用Generator可以很方便的帮助我们建立一个处理Promise的解释器。

然后,在ES7左右,我们又得到了async/await这样的语法,可以让我们以接近编写同步代码的方式来编写异步代码(无需使用.then()或者回调函数)。

两者都能够帮助我们很方便的进行异步编程,但同样,这两者之间也是有不少区别的。

Generator

Generator是一个函数,可以在函数内部通过yield返回一个值(此时,Generator函数的执行会暂定,直到下次触发.next()) 创建一个Generator函数的方法是在function关键字后添加*标识。

在调用一个Generator函数后,并不会立即执行其中的代码,函数会返回一个Generator对象,通过调用对象的next函数,可以获得yield/return的返回值。 无论是触发了yield还是returnnext()函数总会返回一个带有valuedone属性的对象。 value为返回值,done则是一个Boolean对象,用来标识Generator是否还能继续提供返回值。 P.S. Generator函数的执行时惰性的,yield后的代码只在触发next时才会执行

function * oddGenerator () {
  yield 1
  yield 3

  return 5
}

let iterator = oddGenerator()

let first = iterator.next()  // { value: 1, done: false }
let second = iterator.next() // { value: 3, done: false }
let third = iterator.next()  // { value: 5, done: true  }

next的参数传递

我们可以在调用next()的时候传递一个参数,可以在上次yield前接收到这个参数:

function * outputGenerator () {
  let ret1 = yield 1
  console.log(`got ret1: ${ret1}`)
  let ret2 = yield 2
  console.log(`got ret2: ${ret2}`)
}

let iterator = outputGenerator()

iterator.next(1)
iterator.next(2) // got ret1: 2
iterator.next(3) // got ret2: 3

第一眼看上去可能会有些诡异,为什么第一条log是在第二次调用next时才进行输出的 这就又要说到上边的Generator的实现了,上边说到了,yieldreturn都是用来返回值的语法。 函数在执行时遇到这两个关键字后就会暂停执行,等待下次激活。 然后let ret1 = yield 1,这是一个赋值表达式,也就是说会先执行=右边的部分,在=右边执行的过程中遇到了yield关键字,函数也就在此处暂停了,在下次触发next()时才被激活,此时,我们继续进行上次未完成的赋值语句let ret1 = XXX,并在再次遇到yield时暂停。 这也就解释了为什么第二次调用next()的参数会被第一次yield赋值的变量接收到

用作迭代器使用

因为Generator对象是一个迭代器,所以我们可以直接用于for of循环:

但是要注意的是,用作迭代器中的使用,则只会作用于yield return的返回值不计入迭代

function * oddGenerator () {
  yield 1
  yield 3
  yield 5

  return 'won\'t be iterate'
}

for (let value of oddGenerator()) {
  console.log(value)
}
// > 1
// > 3
// > 5

Generator函数内部的Generator

除了yield语法以外,其实还有一个yield*语法,可以粗略的理解为是Generator函数版的[...] 用来展开Generator迭代器的。

function * gen1 () {
  yield 1
  yield* gen2()
  yield 5
}

function * gen2 () {
  yield 2
  yield 3
  yield 4
  return 'won\'t be iterate'
}

for (let value of gen1()) {
  console.log(value)
}
// > 1
// > 2
// > 3
// > 4
// > 5

模拟实现Promise执行器

然后我们结合着Promise,来实现一个简易的执行器。

最受欢迎的类似的库是: co

function run (gen) {
  gen = gen()
  return next(gen.next())

  function next ({done, value}) {
    return new Promise(resolve => {
     if (done) { // finish
       resolve(value)
     } else { // not yet
       value.then(data => {
         next(gen.next(data)).then(resolve)
       })
     }
   })
  }
}

function getRandom () {
  return new Promise(resolve => {
    setTimeout(_ => resolve(Math.random() * 10 | 0), 1000)
  })
}

function * main () {
  let num1 = yield getRandom()
  let num2 = yield getRandom()

  return num1 + num2
}

run(main).then(data => {
  console.log(`got data: ${data}`);
})

一个简单的解释器的模拟(仅作举例说明)

在例子中,我们约定yield后边的必然是一个Promise函数 我们只看main()函数的代码,使用Generator确实能够让我们让近似同步的方式来编写异步代码 但是,这样写就意味着我们必须有一个外部函数负责帮我们执行main()函数这个Generator,并处理其中生成的Promise,然后在then回调中将结果返回到Generator函数,以便可以执行下边的代码。

Async

我们使用async/await来重写上边的Generator例子:

function getRandom () {
  return new Promise(resolve => {
    setTimeout(_ => resolve(Math.random() * 10 | 0), 1000)
  })
}

async function main () {
  let num1 = await getRandom()
  let num2 = await getRandom()

  return num1 + num2
}

console.log(`got data: ${await main()}`)

这样看上去,好像我们从Generator/yield换到async/await只需要把*都改为asyncyield都改为await就可以了。 所以很多人都直接拿Generator/yield来解释async/await的行为,但这会带来如下几个问题:

  1. Generator有其他的用途,而不仅仅是用来帮助你处理Promise
  2. 这样的解释让那些不熟悉这两者的人理解起来更困难(因为你还要去解释那些类似co的库)

async/await是处理Promise的一个极其方便的方法,但如果使用不当的话,也会造成一些令人头疼的问题

Async函数始终返回一个Promise

一个async函数,无论你return 1或者throw new Error()。 在调用方来讲,接收到的始终是一个Promise对象:

async function throwError () {
  throw new Error()
}
async function returnNumber () {
  return 1
}

console.log(returnNumber() instanceof Promise) // true
console.log(throwError() instanceof Promise)   // true

也就是说,无论函数是做什么用的,你都要按照Promise的方式来处理它。

Await是按照顺序执行的,并不能并行执行

JavaScript是单线程的,这就意味着await一只能一次处理一个,如果你有多个Promise需要处理,则就意味着,你要等到前一个Promise处理完成才能进行下一个的处理,这就意味着,如果我们同时发送大量的请求,这样处理就会非常慢,one by one

const bannerImages = []

async function getImageInfo () {
  return bannerImages.map(async banner => await getImageInfo(banner))
}

就像这样的四个定时器,我们需要等待4s才能执行完毕:

function delay () {
  return new Promise(resolve => setTimeout(resolve, 1000))
}

let tasks = [1, 2, 3, 4]

async function runner (tasks) {
  for (let task of tasks) {
    await delay()
  }
}

console.time('runner')
await runner(tasks)
console.timeEnd('runner')

像这种情况,我们可以进行如下优化:

function delay () {
  return new Promise(resolve => setTimeout(resolve, 1000))
}

let tasks = [1, 2, 3, 4]

async function runner (tasks) {
  tasks = tasks.map(delay)
  await Promise.all(tasks)
}

console.time('runner')
await runner(tasks)
console.timeEnd('runner')

草案中提到过await*,但现在貌似还不是标准,所以还是采用Promise.all包裹一层的方法来实现

我们知道,Promise对象在创建时就会执行函数内部的代码,也就意味着,在我们使用map创建这个数组时,所有的Promise代码都会执行,也就是说,所有的请求都会同时发出去,然后我们通过await Promise.all来监听所有Promise的响应。

结论

Generatorasync function都是返回一个特定类型的对象:

  1. Generator: 一个类似{ value: XXX, done: true }这样结构的Object
  2. Async: 始终返回一个Promise,使用await或者.then()来获取返回值

Generator是属于生成器,一种特殊的迭代器,用来解决异步回调问题感觉有些不务正业了。。 而async则是为了更简洁的使用Promise而提出的语法,相比Generator + co这种的实现方式,更为专注,生来就是为了处理异步编程。

现在已经是2018年了,async也是用了好久,就让Generator去做他该做的事情吧。。

参考资料

示例代码:code-resource

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【Go 语言社区】Go学习笔记:json处理

Encode 将一个对象编码成JSON数据,接受一个interface{}对象,返回[]byte和error: func Marshal(v interfac...

60312
来自专栏C语言及其他语言

C语言网Online Judge系统支持语言和编译说明

Online Judge系统支持语言和编译情况: 语言编译器语言版本编译参数Cgcc 4.6.3C99gcc Main.c -o Main -Wall -lm ...

2798
来自专栏函数式编程语言及工具

Scalaz(57)- scalaz-stream: fs2-多线程编程,fs2 concurrency

    fs2的多线程编程模式不但提供了无阻碍I/O(java nio)能力,更为并行运算提供了良好的编程工具。在进入并行运算讨论前我们先示范一下fs2 pip...

2016
来自专栏分布式系统和大数据处理

ES6中的Generator函数

之前在React项目中,遇到异步请求,都是通过redux-thunk来处理,但使用这种方式,action就变得不那么纯净了。当前新的趋势是使用redux-sag...

1253
来自专栏Golang语言社区

在Go语言中使用JSON

Encode 将一个对象编码成JSON数据,接受一个interface{}对象,返回[]byte和error: func Marshal(v interfac...

3399
来自专栏ml

CF---(452)A. Eevee

A. Eevee time limit per test 1 second memory limit per test 256 megabytes in...

42911
来自专栏彭湖湾的编程世界

【Java】利用注解和反射实现一个"低配版"的依赖注入

在Spring中,我们可以通过 @Autowired注解的方式为一个方法中注入参数,那么这种方法背后到底发生了什么呢,这篇文章将讲述如何用Java的注解和反射实...

1254
来自专栏pangguoming

java 反射机制--根据属性名获取属性值

1322
来自专栏xingoo, 一个梦想做发明家的程序员

Oozie分布式工作流——EL表达式

oozie支持使用EL(expression language)表达式。 基本的EL常量 KB MB GB TB PB 基本EL函数 string fir...

2418
来自专栏偏前端工程师的驿站

(cljs/run-at (JSVM. :all) "Metadata就这样哦")

892

扫码关注云+社区