generator、promise、async-await的关联。

82 阅读2分钟

什么是generator :

  1. generator是es6解决异步编程的一种解决方案。
  2. generator是一个函数,它通过yeild让函数拥有多个状态,yeild返回值是一个迭代器对象。
  3. 并且可以通过.next()方法控制执行。

Generator对象 由生成器函数返回并且它符合可迭代协议和迭代器协议。 生成器函数: function*

什么是迭代器: 迭代器是一个对象,并且有一个next方法, 返回值带有 done value 属性: { done: Boolean } :是否迭代完成 { value : any } :是否迭代完成

//类似执行了下面的代码逻辑
function iterable(it,index){
    next(){
       return index < it.length? {value:it[index++],done:false}:{value:undefined,done:true}
    } 
}

什么是可迭代器 一般可迭代器的原型上都有一个Symbol(Symbol.iterator)方法, 一般 数组、Set、Map对象都有可迭代属性。

可迭代对象有什么作用:

  1. for ... of
  2. ... 扩展运算符
  3. 解构赋值
  4. 创建可迭代对象的时候,传入可迭代对象
  5. 用于其他的一些可以传入可迭代对象的API

那么什么是Genertor; genertor是一个带有next方法的一种进行函数控制的方案。它是一个特殊的迭代器。 也叫做生成器。

我们需要通过生成器函数来获取generator对象 那么什么是生成器函数? 以下是生成器函数的语法糖。 function* fn(){ ... yield ... yield } fn.next()

image.png

这样的话就扯出了 async-awiat; await关键字 是一个语法糖,在Generator中,yeild 后面跟着一个promise的话,它会在promise执行结束的结果封装在next()的结果value属性中,继续执行的话则要继续调用next方法。 而await做的事情是,在promise状态改变时,取出promise的返回值作为await关键字的返回。并且自动调用生成器的next()方法。

await关键字后面的代码本质上是在当前await返回的Promise的then方法中执行的 尽管await后面是一个常数,也需还是会放人微任务中去执行。

async-awiat其实就是Generator+Promise自动执行版本的语法糖~