关于 Node.js 中的异步迭代器

开发 前端
从 10.0.0 版开始,异步迭代器就出现在 Node 中了,在本文中,我们将讨论异步迭代器的作用,以及它们可以用在什么地方。

从 10.0.0 版开始,异步迭代器就出现在 Node 中了,在本文中,我们将讨论异步迭代器的作用,以及它们可以用在什么地方。

什么是异步迭代器

异步迭代器实际上是以前迭代器的异步版本。当我们不知道迭代的值和最终状态时,可以使用异步迭代器。两者不同的地方在于,我们得到的 promise 最终将被分解为普通的 { value: any, done: boolean } 对象,另外可以通过 for-await-of 循环来处理异步迭代器。就像 for-of 循环用于同步迭代器一样。

  1. const asyncIterable = [1, 2, 3]; 
  2. asyncIterable[Symbol.asyncIterator] = async function*() { 
  3.   for (let i = 0; i < asyncIterable.length; i++) { 
  4.     yield { value: asyncIterable[i], done: false } 
  5.   } 
  6.   yield { done: true }; 
  7. }; 
  8.  
  9. (async function() { 
  10.   for await (const part of asyncIterable) { 
  11.     console.log(part); 
  12.   } 
  13. })(); 

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

除了流之外,还在还没有什么能够支持异步迭代的结构,但是可以将 asyncIterator 符号手动添加到任何一种可迭代的结构中。

在流上使用异步迭代器

异步迭代器在处理流时非常有用。可读流、可写流、双工流和转换流上都带有 asyncIterator 符号。

  1. async function printFileToConsole(path) { 
  2.   try { 
  3.     const readStream = fs.createReadStream(path, { encoding: 'utf-8' }); 
  4.  
  5.     for await (const chunk of readStream) { 
  6.       console.log(chunk); 
  7.     } 
  8.  
  9.     console.log('EOF'); 
  10.   } catch(error) { 
  11.     console.log(error); 
  12.   } 

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

用于有分页功能的 API

你还可以通过异步迭代从使用分页的源中轻松获取数据。为了实现这个功能,还需要一种从Node https 请求方法提供给的流中重构响应主体的方法。在这里也可以使用异步迭代器,因为 https 请求和响应在 Node 中都是流:

  1. const https = require('https'); 
  2.  
  3. function homebrewFetch(url) { 
  4.   return new Promise(async (resolve, reject) => { 
  5.     const req = https.get(url, async function(res) { 
  6.       if (res.statusCode >= 400) { 
  7.         return reject(new Error(`HTTP Status: ${res.statusCode}`)); 
  8.       } 
  9.  
  10.       try { 
  11.         let body = ''
  12.  
  13.         /* 
  14.           代替 res.on 侦听流中的数据, 
  15.           可以使用 for-await-of, 
  16.           并把数据块附加到到响应体的剩余部分 
  17.         */ 
  18.         for await (const chunk of res) { 
  19.           body += chunk; 
  20.         } 
  21.      
  22.         // 处理响应没有响应体的情况 
  23.         if (!body) resolve({}); 
  24.   // 需要解析正文来获取 json,因为它是一个字符串 
  25.         const result = JSON.parse(body); 
  26.         resolve(result); 
  27.       } catch(error) { 
  28.         reject(error) 
  29.       } 
  30.     }); 
  31.  
  32.     await req; 
  33.     req.end(); 
  34.   }); 

代码通过向 Cat API(https://thecatapi.com/)发出请求,来获取一些猫的图片。另外还添加了 7 秒钟的延迟防止对 cat API 的访问过与频繁,因为那样是极其不道德的。

  1. function fetchCatPics({ limit, page, done }) { 
  2.   return homebrewFetch(`https://api.thecatapi.com/v1/images/search?limit=${limit}&page=${page}&order=DESC`) 
  3.     .then(body => ({ value: body, done })); 
  4.  
  5. function catPics({ limit }) { 
  6.   return { 
  7.     [Symbol.asyncIterator]: async function*() { 
  8.       let currentPage = 0
  9.       // 5 页后停止 
  10.       while(currentPage < 5) { 
  11.         try { 
  12.           const cats = await fetchCatPics({ currentPage, limit, done: false }); 
  13.           console.log(`Fetched ${limit} cats`); 
  14.           yield cats; 
  15.           currentPage ++; 
  16.         } catch(error) { 
  17.           console.log('There has been an error fetching all the cats!'); 
  18.           console.log(error); 
  19.         } 
  20.       } 
  21.     } 
  22.   }; 
  23.  
  24. (async function() { 
  25.   try { 
  26.     for await (let catPicPage of catPics({ limit: 10 })) { 
  27.       console.log(catPicPage); 
  28.       // 每次请求之间等待 7 秒 
  29.       await new Promise(resolve => setTimeout(resolve, 7000)); 
  30.     } 
  31.   } catch(error) { 
  32.     console.log(error); 
  33.   } 
  34. })() 

这样,我们就会每隔7秒钟自动取回一整页的喵星人图片。

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

  1. function actualCatPics({ limit }) { 
  2.   return { 
  3.     [Symbol.asyncIterator]: () => { 
  4.       let page = 0
  5.       return { 
  6.         next: function() { 
  7.           page++; 
  8.           return fetchCatPics({ page, limit, done: false }); 
  9.         }, 
  10.         previous: function() { 
  11.           if (page > 0) { 
  12.             page--; 
  13.             return fetchCatPics({ page, limit, done: false }); 
  14.           } 
  15.           return fetchCatPics({ page: 0, limit, done: true }); 
  16.         } 
  17.       } 
  18.     } 
  19.   }; 
  20.  
  21. try { 
  22.     const someCatPics = actualCatPics({ limit: 5 }); 
  23.     const { next, previous } = someCatPics[Symbol.asyncIterator](); 
  24.     next().then(console.log); 
  25.     next().then(console.log); 
  26.     previous().then(console.log); 
  27. } catch(error) { 
  28.   console.log(error); 

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

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

 

责任编辑:赵宁宁 来源: 前端先锋
相关推荐

2020-12-08 06:28:47

Node.js异步迭代器

2021-09-07 07:53:43

工具

2021-04-06 10:15:29

Node.jsHooks前端

2021-03-16 16:16:41

GeneratorWebsockets前端

2011-12-23 13:58:57

node.js

2011-11-02 09:04:15

Node.js

2021-06-02 00:29:08

Node.jsAcceptEmfile

2021-10-22 08:29:14

JavaScript事件循环

2021-12-28 20:04:23

Node.js开发JavaScript

2021-01-26 08:07:44

Node.js模块 Async

2016-08-11 14:02:02

NodeJS前端

2021-05-21 09:36:42

开发技能代码

2024-01-05 08:49:15

Node.js异步编程

2020-04-15 15:48:03

Node.jsstream前端

2013-11-01 09:34:56

Node.js技术

2017-03-20 13:43:51

Node.js内存泄漏

2017-03-19 16:40:28

漏洞Node.js内存泄漏

2021-09-03 13:42:54

Node.js异步性能

2015-03-10 10:59:18

Node.js开发指南基础介绍

2012-03-09 09:11:29

Node.js
点赞
收藏

51CTO技术栈公众号