异步迭代- 读es2018-2019

前言

在ES6 中，JS拥有了内部对同步迭代数据的支持, 这篇文章主要的是介绍异步迭代Asynchronous iteration，

异步迭代

实现

• 通过内部方法Symbol.asyncIterator 调用
• 在每一个迭代调用next()方法，通过返回一个promise实现

for-await-of

async function f(){
  for await(const x of createAsyncIterable(['a','b'])){
    console.log(x);
  }
}

返回值

每次调用next()方法， 返回值是类似·Promise.resolve({ value: 123, done: false })的结构

Promise.all()和Asynchronous iteration对比

for (const x of await Promise.all(syncIterableOverPromises));
for await (const x of syncIterableOverPromises);

第二种写法会更快， 因为第一种写法必须等Promise.all()执行完成，才会去执行for语句块的内容， 但是 for-wait-of，只要promise里面的第一项执行完成，就会去执行for语句块的内容

异步生成器

示例

async function* createAsyncIterable(syncIterable) {
    for (const elem of syncIterable) {
        yield elem;
    }
}

注意：

• • 号放在function关键字后面
• 和一般的generater不同的是，这个返回值是一个Promise，这个Promise最终的结果为{value,done}

在异步生成器async generator中使用await

在异步生成器中可以使用 await 和 for-await-of, 例如

async function* prefixLines(asyncIterable) {
    for await (const line of asyncIterable) {
        yield '> ' + line;
    }
}

在异步生成器中使用 yield*

基本上和一般的generater一样，不过yield后面的计算对象如果是同步的东东，会自动会转成异步的，就像使用了for-await-of 一样

async function* gen1() {
    yield 'a';
    yield 'b';
    return 2;
}
async function* gen2() {
    const result = yield* gen1(); // (A)
        // result === 2
}

异步生成器的相关规定

异步生成器总共涉及以下的几个概念：

• 两个新接口：AsyncIterable和AsyncIterator
• 一个Symbol: Symbol.asyncIterator
• 新的对象: %AsyncGenerator%, %AsyncFromSyncIteratorPrototype%, %AsyncGeneratorFunction%, %AsyncGeneratorPrototype%, %AsyncIteratorPrototype

异步生成器的内部原理

两个异步生成器函数内部的属性

• [[AsyncGeneratorState]]，这个的值为"suspendedStart", "suspendedYield", "executing", "completed"，"undefined"(在初始化之前)
• [[AsyncGeneratorQueue]]保存着等待调用的next/throw/return, 每一个队列项包含两个字段
  • [[Completion]] next(), throw() 或者 return()的参数，completion的类型（normal, throw, return）是方法进入队列的时候指定的，决定当它出队列的时候调用哪一个？#不太理解#
  • [[Capability]] pending状态的Promise的容量？#不太理解#

管理队列主要是通过下列两个操作

• AsyncGeneratorEnqueue(), 通过这个操作入队列，这个操作是被next(), return() 和 throw() 触发的，在这之后，如果这个generator的状态不是executing的话，AsyncGeneratorResumeNext()会被调用：

  • 因此， 如果一个generator内部调用next(), return() 或者 throw()，这个操作会是异步的
  • await 会导致generator暂停， 但是它的状态会保持在executing， 所以不会因为调用 AsyncGeneratorEnqueue()而使这个generator重新开始

• AsyncGeneratorResumeNext()， 通过这个操作出队，出队是在入队之后，Promise的状态终止（AsyncGeneratorResolve() 或者 AsyncGeneratorReject()）后执行，如果队列里面是空的，就立即返回，否则，则执行队列中第一个元素