[ECMAScript] async iterator

1. iterator

iterator是一个ES 2015特性，它的next方法，会return一个{value,done}对象。
这就要求在next返回的时候，value和done能够确定下来，
因此，next必须是一个同步函数。

2. async iterator & async iterable

为了表示异步数据，
TC39通过了Asynchronous Iteration的提案，目前处于Stage 3阶段。

和同步的方式类似，它制定了async iterator和async iterable需要满足的接口，
（1）async iterator需要实现一个名为next的函数，
该函数要返回一个最终被resolve为{value,done}对象的promise。
（2）async iterable需要实现一个名为Symbol.asyncIterator的函数，
该函数要返回一个async iterator。

const asyncIterator = {
    next: () => new Promise((res, rej) => setTimeout(() => res(1), 500)),
};

asyncIterator.next().then(v => console.log(v));

const asyncIterable = {
    [Symbol.asyncIterator]: () => asyncIterator,
};

3. for await ... of

类似for ... of，对于async iterable，我们可以使用如下方式进行迭代，

for await (const v of asyncIterable) {
    console.log(v);
}

4. async generator

async generator会返回一个async iterator，该async iterator也满足async iterable接口，
而yield*，用于调用其他的async iterable。

const getAsyncValue = async () => 'a';

const asyncGenerator = async function* () {
    const r1 = yield await getAsyncValue();
    console.log(2, r1);    // 2 "d"

    const r2 = await (yield 'b');    // yield表达式需要用括号括起来
    console.log(4, r2);    // 4 "e"
};

const asyncIterator = asyncGenerator();

asyncIterator.next('c').then(({ value, done }) => {
    console.log(1, value, done);    // 1 "a" false

    asyncIterator.next('d').then(({ value, done }) => {
        console.log(3, value, done);    // 3 "b" false

        asyncIterator.next('e').then(({ value, done }) =>
            console.log(5, value, done));    // 5 undefined true
    });
});

以上代码中的log，第一个参数，表示了先后顺序。

5. 环境搭建

（1）webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        index: ['babel-polyfill', path.resolve('./src/index.js')],
    },
    output: {
        path: path.resolve('./dist/'),
        filename: '[name].js'
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    }
};

（2）.babelrc

{
    "presets": [
        "es2015"
    ],
    "plugins": [
        "transform-async-generator-functions"
    ]
}

（3）初始化，安装依赖，构建

$ npm init

$ npm i --save-dev babel-core babel-loader babel-polyfill babel-preset-es2015 \
babel-plugin-transform-async-generator-functions

$ webpack --watch

---

参考

github: tc39/proposal-async-iteration
github: tc39/proposals
ECMAScript 2015 Language Specification