從 Node.js v10.0.0 開始,異步迭代器就出現中了,最近它們在社區中的吸引力愈來愈大。在本文中,咱們將討論異步迭代器的做用,還將解決它們可能用於什麼目的的問題。node
那麼什麼是異步迭代器?它們其實是之前可用的迭代器的異步版本。當咱們不知道迭代的值和最終狀態時,可使用異步迭代器,最終咱們獲得能夠解決 {value:any,done:boolean} 對象的 promise。咱們還得到了 for-await-of 循環,以幫助咱們循環異步迭代器。就像 for-of 循環是針對同步迭代器同樣。json
1const asyncIterable = [1, 2, 3]; 2asyncIterable[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 解析後再繼續執行下一個。api
除了流,當前沒有太多支持異步迭代的結構,可是能夠將符號手動添加到任何可迭代的結構中,如此處所示。promise
異步迭代器在處理流時很是有用。可讀流、可寫流、雙工流和轉換流都支持異步迭代器。瀏覽器
1async 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 } 13}
若是以這種方式編寫代碼,則沒必要經過迭代來獲取每一個數據塊時監聽 data 和 end 事件,而且 for-await-of 循環隨着流自己結束而結束。異步
你還能夠用異步迭代從使用分頁的源中輕鬆獲取數據。爲此,咱們還須要一種從 Node https 請求方法提供給咱們的流中重構響應主體的方法。也能夠在這裏使用異步迭代器,由於 https 請求和響應是 Node 中的流:async
1const https = require('https'); 2 3function 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,並附加 data chunk 16 到響應主體的其他部分 17 */ 18 for await (const chunk of res) { 19 body += chunk; 20 } 21 22 // 處理沒有 body 的狀況 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 }); 35}
咱們將向 Cat API 發出請求,以 10 張爲一組獲取一些貓的圖片。咱們還將在請求之間添加 7 秒的延遲,最大頁面數爲5,以免致使 cat API 過載。ide
咱們還將在請求和最大頁數之間添加 7 秒鐘的延遲5個以免貓cat API重載,由於那將是災難性的。fetch
1function 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 6function catPics({ limit }) { 7 return { 8 [Symbol.asyncIterator]: async function*() { 9 let currentPage = 0; 10 // Stop after 5 pages 11 while(currentPage < 5) { 12 try { 13 const cats = await fetchCatPics({ currentPage, limit, done: false }); 14 console.log(`Fetched ${limit} cats`); 15 yield cats; 16 currentPage ++; 17 } catch(error) { 18 console.log('There has been an error fetching all the cats!'); 19 console.log(error); 20 } 21 } 22 } 23 }; 24} 25 26(async function() { 27 try { 28 for await (let catPicPage of catPics({ limit: 10 })) { 29 console.log(catPicPage); 30 // Wait for 7 seconds between requests 31 await new Promise(resolve => setTimeout(resolve, 7000)); 32 } 33 } catch(error) { 34 console.log(error); 35 } 36})()
這樣,咱們就會每隔 7 秒鐘自動取回一整頁的貓圖片,以供欣賞。ui
一種更常見的在頁面之間導航的方法是實現 next 和 previous 方法並將它們公開爲控件:
1function 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 22try { 23 const someCatPics = actualCatPics({ limit: 5 }); 24 const { next, previous } = someCatPics[Symbol.asyncIterator](); 25 next().then(console.log); 26 next().then(console.log); 27 previous().then(console.log); 28} catch(error) { 29 console.log(error); 30}
如你所見,當你要獲取數據頁面或在應用程序的 UI 上進行無限滾動等操做時,異步迭代器將會很是有用。
這些功能已經在瀏覽器中使用了一段時間,在 Chrome v63+、 Firefox v57+ 和 Safari v11.1 中可用。可是當前在 IE 和 Edge 中不可用。
你是否對使用異步迭代器有什麼新想法?你已經在程序中使用它們了嗎?請在留言中告訴我。
原文連接