从 10.0.0 版开始，异步迭代器就呈现在 Node 中了，在本文中，咱们将探讨异步迭代器的作用，以及它们能够用在什么中央。

什么是异步迭代器

异步迭代器实际上是以前迭代器的异步版本。当咱们不晓得迭代的值和最终状态时，能够应用异步迭代器。两者不同的中央在于，咱们失去的 promise 最终将被合成为一般的 { value: any, done: boolean } 对象，另外能够通过 for-await-of 循环来解决异步迭代器。就像 for-of 循环用于同步迭代器一样。

const asyncIterable = [1, 2, 3];asyncIterable[Symbol.asyncIterator] = async function*() {  for (let i = 0; i < asyncIterable.length; i++) {    yield { value: asyncIterable[i], done: false }  }  yield { done: true };};(async function() {  for await (const part of asyncIterable) {    console.log(part);  }})();

与通常的 for-of 循环相同，`for-await-of 循环将会期待它收到的每个 promise 解析之后再继续执行下一个。

除了流之外，还在还没有什么可能反对异步迭代的构造，然而能够将 asyncIterator 符号手动增加到任何一种可迭代的构造中。

在流上应用异步迭代器

异步迭代器在解决流时十分有用。可读流、可写流、双工流和转换流上都带有 asyncIterator 符号。

async function printFileToConsole(path) {  try {    const readStream = fs.createReadStream(path, { encoding: 'utf-8' });    for await (const chunk of readStream) {      console.log(chunk);    }    console.log('EOF');  } catch(error) {    console.log(error);  }}

如果以这种形式写代码，就不须要在通过迭代获取每个数据块时监听 end 和 data 事件了，并且 for-await-of 循环会随着流的完结而完结。

用于有分页性能的 API

你还能够通过异步迭代从应用分页的源中轻松获取数据。为了实现这个性能，还须要一种从Node https 申请办法提供给的流中重构响应主体的办法。在这里也能够应用异步迭代器，因为 https 申请和响应在 Node 中都是流：

const https = require('https');function homebrewFetch(url) {  return new Promise(async (resolve, reject) => {    const req = https.get(url, async function(res) {      if (res.statusCode >= 400) {        return reject(new Error(`HTTP Status: ${res.statusCode}`));      }      try {        let body = '';        /*          代替 res.on 侦听流中的数据，          能够应用 for-await-of，          并把数据块附加到到响应体的残余局部        */        for await (const chunk of res) {          body += chunk;        }            // 解决响应没有响应体的状况        if (!body) resolve({});        // 须要解析注释来获取 json，因为它是一个字符串        const result = JSON.parse(body);        resolve(result);      } catch(error) {        reject(error)      }    });    await req;    req.end();  });}

代码通过向 Cat API（https://thecatapi.com/）发出请求，来获取一些猫的图片。另外还增加了 7 秒钟的提早避免对 cat API 的拜访过与频繁，因为那样是极其不道德的。

function fetchCatPics({ limit, page, done }) {  return homebrewFetch(`https://api.thecatapi.com/v1/images/search?limit=${limit}&page=${page}&order=DESC`)    .then(body => ({ value: body, done }));}function catPics({ limit }) {  return {    [Symbol.asyncIterator]: async function*() {      let currentPage = 0;      // 5 页后进行      while(currentPage < 5) {        try {          const cats = await fetchCatPics({ currentPage, limit, done: false });          console.log(`Fetched ${limit} cats`);          yield cats;          currentPage ++;        } catch(error) {          console.log('There has been an error fetching all the cats!');          console.log(error);        }      }    }  };}(async function() {  try {    for await (let catPicPage of catPics({ limit: 10 })) {      console.log(catPicPage);      // 每次申请之间期待 7 秒      await new Promise(resolve => setTimeout(resolve, 7000));    }  } catch(error) {    console.log(error);  }})()

这样，咱们就会每隔7秒钟主动取回一整页的喵星人图片。

一种更常见的页面间导航的办法可实现 next 和 previous 办法并将它们公开为控件：

function actualCatPics({ limit }) {  return {    [Symbol.asyncIterator]: () => {      let page = 0;      return {        next: function() {          page++;          return fetchCatPics({ page, limit, done: false });        },        previous: function() {          if (page > 0) {            page--;            return fetchCatPics({ page, limit, done: false });          }          return fetchCatPics({ page: 0, limit, done: true });        }      }    }  };}try {    const someCatPics = actualCatPics({ limit: 5 });    const { next, previous } = someCatPics[Symbol.asyncIterator]();    next().then(console.log);    next().then(console.log);    previous().then(console.log);} catch(error) {  console.log(error);}

如你所见，当要获取数据页面或在程序的 UI 上进行有限滚动之类的操作时，异步迭代器会十分有用。

这些性能在 Chrome 63+、Firefox 57+、Safari 11.1+ 中可用。

你还能想到能够把异步迭代器用在什么中央吗？欢送在上面留言！

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13个帮你进步开发效率的古代CSS框架
  • 疾速上手BootstrapVue
  • JavaScript引擎是如何工作的？从调用栈到Promise你须要晓得的所有
  • WebSocket实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30分钟用Node.js构建一个API服务器
  • Javascript的对象拷贝
  • 程序员30岁前月薪达不到30K，该何去何从
  • 14个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把HTML转成PDF的4个计划及实现
  • 更多文章...