45:["$","title",null,{"children":"Aysnc generator and aysnc iteration | Ang Lee | Observable"}] 4d:[] 49:{"id":"b66ef51e9ca7cdef","slug":"aysnc-generator-and-aysnc-iteration","title":"Aysnc generator and aysnc iteration","thumbnail":"1862b5e5804138c7df06cc39d51ed64f2c2fb6ff7c4519aac20eda3463f3fb3f","access_level":"public","create_time":"$D2018-05-02T11:20:56.430Z","update_time":"$D2018-05-25T20:11:08.439Z","view_time":null,"first_public_time":"$D2018-05-02T12:35:12.873Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b490bb3c2eba71dc","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":"starter_2024","bio":"","following":false},"version":319,"publish_version":319,"role":null,"authored":false,"authors":[{"type":"individual","id":"b52ef55b5f9bf7a8","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b52ef55b5f9bf7a8","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Aysnc generator and aysnc iteration","cells":[{"id":0,"value":"md`# Aysnc generator and aysnc iteration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`## generate123 (not async)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"generate123 = function* () {\n yield 1;\n yield 2;\n yield 3;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`The iterables generated by calling generator function have \\`[Symbol.iterator]\\` method defined:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"{\n const iterable = generate123();\n return {\n syncItr: iterable[Symbol.iterator],\n asyncItr: iterable[Symbol.asyncIterator] \n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`Besides being iterable, the return of a generator is also a iterator (see [this notebook](https://beta.observablehq.com/@anglee/iterators-and-generators) for more details). An iterator has a \\`next\\` method.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n const iterator = generate123();\n const ret = [];\n while (true) {\n const {done, value} = iterator.next(); \n if (done) return ret;\n ret.push(value);\n }\n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`### for-of loop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"{\n const ret = [];\n for (const i of generate123()) {\n ret.push(i);\n }\n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`### using '...'`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"[...generate123()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`## generate123Async (Async generator)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"generate123Async = async function* () {\n yield 1;\n yield await Promises.delay(500, 2);\n yield Promises.delay(100, 3);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`For async generators, the iterables returned have \\`Symbol.asyncIterator\\`(instead of \\`Symbol.iterator\\`) is defined:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"{\n const iterable = generate123Async();\n return {\n syncItr: iterable[Symbol.iterator],\n asyncItr: iterable[Symbol.asyncIterator] \n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`When iterating, \\`iterable.next()\\` returns a promise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"{\n const iterator = generate123Async();\n const ret = [];\n while (true) {\n const {done, value} = await iterator.next(); // <-- iterable.next() returns a promise\n if (done) return ret;\n ret.push(value); // note even when async generator yields promise (i.e 3), the value is un-wrapped\n }\n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`\n### for-await-of loop\nThe for-of loop will get its iterator by calling \\`itr[Symbol.iterator]\\`. Whereas the for-await loop will get its iterator by calling \\`asyncThing[Symbol.asyncIterator]\\` if it's defined, otherwise it will fall back to \\`asyncThing[Symbol.iterator]\\` (see the **generate123Promise** example below).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\n const ret = [];\n for await (const i of generate123Async()) {\n ret.push(i);\n }\n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`## generate123Promise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`\\`generate123Promise\\` is not a async generator, it just that the values it yields are promises`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"generate123Promise = function* () {\n yield Promises.delay(100, 1);\n yield Promises.delay(800, 2);\n yield Promises.delay(100, 3);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`It's not an async generator, as you can see \\`asyncIterator\\` is undefined on the iterables:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"{\n const iterable = generate123Promise();\n return {\n syncItr: iterable[Symbol.iterator],\n asyncItr: iterable[Symbol.asyncIterator] \n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`We \\`await\\` before pushing the values into ret:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n const iterator = generate123Promise();\n const ret = [];\n while (true) {\n const {done, value} = iterator.next();\n if (done) return ret;\n ret.push(await value);\n }\n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`\n### for-await-of loop falls back to \\`Symbol.iterator\\`\nIn this case, \\`for-await-of\\` iterate through each item from the Iterable and waits for it to resolve. You'll always get the number in the correct order: [1,2,3].\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"{\n const ret = [];\n for await (const value of generate123Promise()) {\n ret.push(value);\n }\n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"for_await_of_examples = md`### Examples of using \\`for-await-of\\` loop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`\nScreenshot take from: 📺 [Google I/O 2018 Session - Build the future of the web with modern JavaScript](https://www.youtube.com/watch?v=mIWCLOftfRw)\n\nExample, get response size:\n $\"source:$ \nimproved with \\`for-await-of\\`\n $\"source:$ \n\nExample, print a text file:\n $\"source:$ \nimproved with \\`for-await-of\\`\n $\"source:$ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"sync_async_diff = md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"appendix = md`\nIterator interfaces [[2]](https://beta.observablehq.com/@anglee/aysnc-generator-and-aysnc-iteration#related):\n\n

\ninterface Iterable {\n  \\[Symbol.iterator\\]\\(\\) : Iterator;\n}\ninterface Iterator {\n  next\\(\\) : IteratorResult;\n}\ninterface IteratorResult {\n  value: any;\n  done: boolean;\n}\n

\n\nAsync Iterator interfaces [[4]](https://beta.observablehq.com/@anglee/aysnc-generator-and-aysnc-iteration#related):\n

\ninterface AsyncIterable {\n  \\[Symbol.asyncIterator\\]\\(\\) : Iterator\n}\ninterface AsyncIterator {\n  next\\(\\) : Promise<IteratorResult>;\n}\ninterface AsyncIteratorResult {\n  value: any;\n  done: boolean;\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"References = md`## References\n- [1] Jake Archibald, [Async iterators and generators](https://jakearchibald.com/2017/async-iterators-and-generators/)\n- [2] Axel Rasuschmayer, [Exploring ES6, Ch21. Iterables and iterators](http://exploringjs.com/es6/ch_iteration.html)\n- [3] Axel Rasuschmayer, [Exploring ES6, Ch22. Generators](http://exploringjs.com/es6/ch_generators.html)\n- [4] Axel Rasuschmayer, [Exploring ES2018 and ES2019, Asynchronous iteration](http://exploringjs.com/es2018-es2019/ch_asynchronous-iteration.html)\n- [5] https://beta.observablehq.com/@mbostock/introduction-to-asynchronous-iteration\n- [6] Fun Fun Function episode: [Async Iterators](https://www.youtube.com/watch?v=I5oDbp_U-fQ) on YouTube\n- [7]Finds all elements on the page, gist by [@DasSurma](https://twitter.com/DasSurma): https://gist.github.com/surma/af49fc6384a1161486667b27790f9e4c\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null