详解ES9的新特性之异步遍历Async iteration

异步遍历

在讲解异步遍历之前,我们先回想一下ES6中的同步遍历。

根据ES6的定义,iteration主要由三部分组成:

Iterable

先看下Iterable的定义:

interface Iterable {
    [Symbol.iterator]() : Iterator;
}

Iterable表示这个对象里面有可遍历的数据,并且需要实现一个可以生成Iterator的工厂方法。

Iterator

interface Iterator {
    next() : IteratorResult;
}

可以从Iterable中构建Iterator。Iterator是一个类似游标的概念,可以通过next访问到IteratorResult。

IteratorResult

IteratorResult是每次调用next方法得到的数据。

interface IteratorResult {
    value: any;
    done: boolean;
}

IteratorResult中除了有一个value值表示要获取到的数据之外,还有一个done,表示是否遍历完成。

下面是一个遍历数组的例子:

> const iterable = ['a', 'b'];

> const iterator = iterable[Symbol.iterator]();

> iterator.next()

{ value: 'a', done: false }

> iterator.next()

{ value: 'b', done: false }

> iterator.next()

{ value: undefined, done: true }

但是上的例子遍历的是同步数据,如果我们获取的是异步数据,比如从http端下载下来的文件,我们想要一行一行的对文件进行遍历。因为读取一行数据是异步操作,那么这就涉及到了异步数据的遍历。

加入异步读取文件的方法是readLinesFromFile,那么同步的遍历方法,对异步来说就不再适用了:

//不再适用
for (const line of readLinesFromFile(fileName)) {
    console.log(line);
}

也许你会想,我们是不是可以把异步读取一行的操作封装在Promise中,然后用同步的方式去遍历呢?

想法很好,不过这种情况下,异步操作是否执行完毕是无法检测到的。所以方法并不可行。

于是ES9引入了异步遍历的概念:

1.可以通过Symbol.asyncIterator来获取到异步iterables中的iterator。

2.异步iterator的next()方法返回Promises对象,其中包含IteratorResults。

所以,我们看下异步遍历的API定义:

interface AsyncIterable {
    [Symbol.asyncIterator]() : AsyncIterator;
}
interface AsyncIterator {
    next() : Promise<IteratorResult>;
}
interface IteratorResult {
    value: any;
    done: boolean;
}

我们看一个异步遍历的应用:

const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();
asyncIterator.next()
.then(iterResult1 => {
    console.log(iterResult1); // { value: 'a', done: false }
    return asyncIterator.next();
})
.then(iterResult2 => {
    console.log(iterResult2); // { value: 'b', done: false }
    return asyncIterator.next();
})
.then(iterResult3 => {
    console.log(iterResult3); // { value: undefined, done: true }
});

其中createAsyncIterable将会把一个同步的iterable转换成一个异步的iterable,我们将会在下面一小节中看一下到底怎么生成的。

这里我们主要关注一下asyncIterator的遍历操作。

因为ES8中引入了Async操作符,我们也可以把上面的代码,使用Async函数重写:

async function f() {
    const asyncIterable = createAsyncIterable(['a', 'b']);
    const asyncIterator = asyncIterable[Symbol.asyncIterator]();
    console.log(await asyncIterator.next());
        // { value: 'a', done: false }
    console.log(await asyncIterator.next());
        // { value: 'b', done: false }
    console.log(await asyncIterator.next());
        // { value: undefined, done: true }
}

异步iterable的遍历

使用for-of可以遍历同步iterable,使用 for-await-of 可以遍历异步iterable。

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

注意,await需要放在async函数中才行。

如果我们的异步遍历中出现异常,则可以在 for-await-of 中使用try catch来捕获这个异常:

function createRejectingIterable() {
    return {
        [Symbol.asyncIterator]() {
            return this;
        },
        next() {
            return Promise.reject(new Error('Problem!'));
        },
    };
}
(async function () {
    try {
        for await (const x of createRejectingIterable()) {
            console.log(x);
        }
    } catch (e) {
        console.error(e);
            // Error: Problem!
    }
})(); 

同步的iterable返回的是同步的iterators,next方法返回的是{value, done}。

如果使用 for-await-of 则会将同步的iterators转换成为异步的iterators。然后返回的值被转换成为了Promise。

如果同步的next本身返回的value就是Promise对象,则异步的返回值还是同样的promise。

也就是说会把:Iterable<Promise<T>> 转换成为 AsyncIterable<T> ,如下面的例子所示:

async function main() {
    const syncIterable = [
        Promise.resolve('a'),
        Promise.resolve('b'),
    ];
    for await (const x of syncIterable) {
        console.log(x);
    }
}
main();

// Output:
// a
// b

上面的例子将同步的Promise转换成异步的Promise。

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

// Output:
// c
// d

上面的例子将同步的常量转换成为Promise。 可以看到两者的结果是一样的。

异步iterable的生成

回到上面的例子,我们使用createAsyncIterable(syncIterable)将syncIterable转换成了AsyncIterable。

我们看下这个方法是怎么实现的:

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

上面的代码中,我们在一个普通的generator function前面加上async,表示的是异步的generator。

对于普通的generator来说,每次调用next方法的时候,都会返回一个object {value,done} ,这个object对象是对yield值的封装。

对于一个异步的generator来说,每次调用next方法的时候,都会返回一个包含object {value,done} 的promise对象。这个object对象是对yield值的封装。

因为返回的是Promise对象,所以我们不需要等待异步执行的结果完成,就可以再次调用next方法。

我们可以通过一个Promise.all来同时执行所有的异步Promise操作:

const asyncGenObj = createAsyncIterable(['a', 'b']);
const [{value:v1},{value:v2}] = await Promise.all([
    asyncGenObj.next(), asyncGenObj.next()
]);
console.log(v1, v2); // a b

在createAsyncIterable中,我们是从同步的Iterable中创建异步的Iterable。

接下来我们看下如何从异步的Iterable中创建异步的Iterable。

从上一节我们知道,可以使用for-await-of 来读取异步Iterable的数据,于是我们可以这样用:

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

在generator一文中,我们讲到了在generator中调用generator。也就是在一个生产器中通过使用yield*来调用另外一个生成器。

同样的,如果是在异步生成器中,我们可以做同样的事情:

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

(async function () {
    for await (const x of gen2()) {
        console.log(x);
    }
})();
// Output:
// a
// b

如果在异步生成器中抛出异常,这个异常也会被封装在Promise中:

async function* asyncGenerator() {
    throw new Error('Problem!');
}
asyncGenerator().next()
.catch(err => console.log(err)); // Error: Problem!

异步方法和异步生成器

异步方法是使用async function 声明的方法,它会返回一个Promise对象。

function中的return或throw异常会作为返回的Promise中的value。

(async function () {
    return 'hello';
})()
.then(x => console.log(x)); // hello

(async function () {
    throw new Error('Problem!');
})()
.catch(x => console.error(x)); // Error: Problem!

异步生成器是使用 async function * 申明的方法。它会返回一个异步的iterable。

通过调用iterable的next方法,将会返回一个Promise。异步生成器中yield 的值会用来填充Promise的值。如果在生成器中抛出了异常,同样会被Promise捕获到。

async function* gen() {
    yield 'hello';
}
const genObj = gen();
genObj.next().then(x => console.log(x));
    // { value: 'hello', done: false }

以上就是详解ES9的新特性之异步遍历Async iteration的详细内容,更多关于ES9的新特性之异步遍历Async iteration的资料请关注我们其它相关文章!

(0)

相关推荐

  • ES6实现的遍历目录函数示例

    本文实例讲述了ES6实现的遍历目录函数.分享给大家供大家参考,具体如下: // npm init // npm install koa --save-dev // node --harmony app.js const fs = require('fs'); var eachDir = (() => { let queue = []; var eachFiles = (options) => { if (queue.length) { let path = queue.shift(); fs.

  • ES6新特性二:Iterator(遍历器)和for-of循环详解

    本文实例讲述了ES6新特性之Iterator(遍历器)和for-of循环.分享给大家供大家参考,具体如下: 1. 遍历数组 for-of工作原理:迭代器有一个next方法,for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的 done属性为true的时候结束循环. ① 在ES6之前 var arr = [1,2,3,4,5,6]; arr.name = 'a'; for (var index = 0; index < arr.length; index++) {

  • ES9的新特性之正则表达式RegExp详解

    简介 正则表达式是我们做数据匹配的时候常用的一种工具,虽然正则表达式的语法并不复杂,但是如果多种语法组合起来会给人一种无从下手的感觉. 于是正则表达式成了程序员的噩梦.今天我们来看一下如何在ES9中玩转正则表达式. Numbered capture groups 我们知道正则表达式可以分组,分组是用括号来表示的,如果想要获取到分组的值,那么就叫做capture groups. 通常来说,我们是通过序号来访问capture groups的,这叫做Numbered capture groups. 举

  • ES7中利用Await减少回调嵌套的方法详解

    前言 我们知道javascript是没办法阻塞的,所有的等待只能通过回调来完成,这就造成了回调嵌套的问题,导致代码乱到爆,这时候Await就有用处了. 对于await的底层机制这里就不详述了,以免将文章的篇幅拖的很长,需要的朋友们可以参考这篇文章:http://www.jb51.net/article/123257.htm,下面开始本文的正式内容. 利用Await减少回调嵌套 我们大家在开发的时候,有时候需要发很多请求,然后经常会面临嵌套回调的问题,即在一个回调里面又嵌了一个回调,导致代码层层缩

  • ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解

    本文实例讲述了ES6 Iterator遍历器原理,应用场景及相关常用知识拓展.分享给大家供大家参考,具体如下: 介绍Iterator之前先列举下js的表示数据集合结构的几种方式: 在es6之前有 Array , Object, es6新增了 map, set,当然用户也可以组合使用这几种数据结构,灵活存储数据. 但是当数据结构变得复杂后,怎样取到里面的数据就也相对复杂,这就需要有一种读取数据的统一的接口机制,来处理不同的数据结构. 遍历器就是这样一种接口机制,Iterator是一种接口,为不同数

  • 一文读懂ES7中的javascript修饰器

    什么是修饰器 修饰器(Decorator)是ES7的一个提案,它的出现能解决两个问题: 不同类间共享方法 编译期对类和方法的行为进行改变 用法也很简单,就是在类或方法的上面加一个@符,在vue in typescript中经常用到 以上的两个用处可能不太明白,没关系,我们开始第一个例子 例子1:修饰类 @setProp class User {} function setProp(target) { target.age = 30 } console.log(User.age) 这个例子要表达的

  • ES6中Iterator与for..of..遍历用法分析

    本文实例讲述了ES6中Iterator与for..of..遍历用法.分享给大家供大家参考,具体如下: Iterator与for..of..遍历 1.Iterator概念 遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.JS中有些数据结构具备原生的Iterator接口.为了更好理解这个概念,我们也可以自己写一个Iterator. var it = simIteractor(['hi','ES5']); console.log(it.next()); //Object

  • ES7之Async/await的使用详解

    在 js 异步请求数据时,通常,我们多采用回调函数的方式解决,但是,如果有多个回调函数嵌套时,代码显得很不优雅,维护成本也相应较高. ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题. Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值. await 操作符用于等待一个Promise 对象.它只能在异步函数 async function 中使用. await 表达式会暂停当前 async function

  • 详解ES9的新特性之异步遍历Async iteration

    异步遍历 在讲解异步遍历之前,我们先回想一下ES6中的同步遍历. 根据ES6的定义,iteration主要由三部分组成: Iterable 先看下Iterable的定义: interface Iterable { [Symbol.iterator]() : Iterator; } Iterable表示这个对象里面有可遍历的数据,并且需要实现一个可以生成Iterator的工厂方法. Iterator interface Iterator { next() : IteratorResult; } 可

  • 详解MySQL8的新特性ROLE

    [MySQL的ROLE解决了什么问题] 假设你是一个职业素养良好的DBA比较同时又比较注重权限管理的话:可能遇到过这样的问题,数据库中有多个开发人员的账号:有一天要建 一个新的schema,如果你希望之前所有的账号都能操作这个schema下的表的话,在mysql-8.0之前你要对第一个账号都单独的赋一次权. mysql-8.0.x所权限抽象了出来用ROLE来表示,当你为ROLE增加新的权限的时候,与这个ROLE关联的所有用户的权限也就一并变化了:针对 上面提到的场景在mysql-8.0.x下只要

  • 详解Servlet3.0新特性(从注解配置到websocket编程)

    Servlet3.0的出现是servlet史上最大的变革,其中的许多新特性大大的简化了web应用的开发,为广大劳苦的程序员减轻了压力,提高了web开发的效率.主要新特性有以下几个: 引入注解配置 支持web模块化开发 程序异步处理 改进文件上传API 非阻塞式IO读取流 Websocket实时通信 一.注解配置 Servlet3.0新规范顺应了时代的潮流,使用注解配置,取代混乱的web.xml全局配置.在这之前我们在创建servlet,filter,listener时,都是在web.xml中配置

  • 详解c++11新特性之模板的改进

    C++11关于模板有一些细节的改进: 模板的右尖括号 模板的别名 函数模板的默认模板参数 模板的右尖括号 C++11之前是不允许两个右尖括号出现的,会被认为是右移操作符,所以需要中间加个空格进行分割,避免发生编译错误. int main() { std::vector<std::vector<int>> a; // error std::vector<std::vector<int> > b; // ok } 这个我之前都不知道,我开始学编程的时候就已经是C

  • 详解Vite的新体验

    什么是Vite?(是前端新玩具) Vite是一个web开发构建工具,它通过本机 ES 模块导入在开发过程中更新代码,达到快速更新的目的. 特点 超快的冷服务器启动 即时的模块更新 真正的按需编译 更小的打包体积 开始使用 Vue用户注意:Vite当前仅适用于Vue3.x.这也意味着您不能使用尚未与Vue 3兼容的库. 安装 npm init vite-app <项目名称> cd <项目名称> npm install npm run dev ## 执行完以上命令,就意味着你的vue3

  • 详解Java 缺失的特性扩展方法

    目录 什么是扩展方法 传统写法: 使用 Stream 写法: 在 Java 中怎么实现扩展方法 准备条件 编写扩展方法 数组扩展方法 扩展静态方法 建议 什么是扩展方法 扩展方法,就是能够向现有类型直接“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改现有类型.调用扩展方法的时候,与调用在类型中实际定义的方法相比没有明显的差异. 为什么需要扩展方法 考虑要实现这样的功能:从 Redis 取出包含多个商品ID的字符串后(每个商品ID使用英文逗号分隔),先对商品ID进行去重(并能够维持元

  • asp.net使用H5新特性实现异步上传的示例

    ###index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="Script/jquery-1.10.2.min.js"></script> <script src="Script/index.js"></script> <title><

  • 详解Java中list,set,map的遍历与增强for循环

    详解Java中list,set,map的遍历与增强for循环 Java集合类可分为三大块,分别是从Collection接口延伸出的List.Set和以键值对形式作存储的Map类型集合. 关于增强for循环,需要注意的是,使用增强for循环无法访问数组下标值,对于集合的遍历其内部采用的也是Iterator的相关方法.如果只做简单遍历读取,增强for循环确实减轻不少的代码量. 集合概念: 1.作用:用于存放对象 2.相当于一个容器,里面包含着一组对象,其中的每个对象作为集合的一个元素出现 3.jav

  • 详解ASP.NET MVC下的异步Action的定义和执行原理

    Visual Studio提供的Controller创建向导默认为我们创建一个继承自抽象类Controller的Controller类型,这样的Controller只能定义同步Action方法.如果我们需要定义异步Action方法,必须继承抽象类AsyncController.这篇问你讲述两种不同的异步Action的定义方法和底层执行原理. 一.基于线程池的请求处理 ASP.NET通过线程池的机制处理并发的HTTP请求.一个Web应用内部维护着一个线程池,当探测到抵达的针对本应用的请求时,会从池

随机推荐