31:[] 2f:{"title":"Introduction to Promises","cells":[{"id":207,"value":"md`# Introduction to Promises`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"step1 = md` ### What is promise`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"\nmd`\n**A promise represents a value that is not yet known, but that *will* be known in the future.** For example, when you load a file from a web server into a browser, the file’s contents aren’t available right away: the file must first be transferred over the network. Rather than locking up while the file is downloading, browsers download asynchronously.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md `\n**This asynchronous design, essential for fluid interaction and parallel downloads, introduces complexity: code that depends on promised values must wait until the values are resolved rather than running immediately.** Fortunately, JavaScript’s [Promise API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) (and its companion \\`await\\` operator), make it easier to work with asynchronous values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"d3csvBetweenCells = md`\n**Promises are often not created by you. Instead, an asynchronous library method might return a promise, and you need to wait for the promise to resolve (or reject)**. D3’s [d3.csv](https://github.com/d3/d3-fetch/blob/master/README.md#csv) is just such a function: it [fetches](https://fetch.spec.whatwg.org/) a file from another server, parsing [comma-separated values](https://en.wikipedia.org/wiki/Comma-separated_values) into a structured array of objects. **d3.csv can’t return the array right away, so it instead returns a Promise**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"data = d3.csv(\"https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`Did you see the promise? **Observable implicitly awaits promises across cell boundaries**, so you often don’t need to deal with a promise directly. **Cells can return promises, and other cells can simply refer to the values and they’ll run when the promise resolves**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"data.map(d => +d.Year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"d3csvReturnPromise = {\n const data = d3.csv(\"https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv\");\n\n // return Array.isArray(data1)\n return \"what is data? \" + data;\n // return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"d3BehaveInCellBlock = {\n const data = d3.csv(\"https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv\");\n // the error caused by the line below executed before the line above finishes loading\n return data.map(d => +d.Year);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"{\n // d3.csv return a promise, await makes sure data1 receives data before the second line runs\n const data = await d3.csv(\"https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv\");\n return data.map(d => +d.Year);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"step3 = md` ### How to use ${code('Promises.delay')} and ${code('Promises.tick')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`**Observable’s standard library has few built-in methods related to Promises.**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"Promises","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"PromisesDelay = md`${code(\"Promises.delay\")} returns a promise that resolves to a given value after a given duration. **The promise below resolves to a greeting after three seconds**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"Promises.delay(3000, \"Hello, world!\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"{\n const p = Promises.delay(3000, \"Hello, world!\");\n\n return \"what is p? \" + p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"{\n const p = Promises.delay(3000, \"Hello, world!\");\n \n return await p + \" I am here.\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`${code(\"Promises.tick\")} is similar, except it returns a promise that resolves at the next given interval. We’ll cover **asynchronous generators in a later tutorial**, but here’s how to **make a counter that increments every second**:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"whyYieldNotReturn = {\n let i = 0;\n while (true) {\n return i++; // does not generating numbers, run once and exit the block\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"// {\n// let i = 0;\n// while (true) {\n// yield ++i; // here do generate numbers, and keep running the loop\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"// {\n// let i = 0;\n// while (true) {\n// if (i % 5000000 === 0) { // make use of modulo %\n// yield i++;\n// } \n// ++i;\n \n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"// {\n// let i = 0;\n// while (true) {\n// yield Promises.delay(1000, ++i);\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"yield_Promises_tick = {\n let i = 0;\n while (true) {\n yield Promises.tick(1000, ++i); // if just Promises.tick, no await needed\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"// {\n// let i = 0;\n// while (true) {\n// yield Promises.tick(1000, ++i) + 1; // keep running at 60f/s, not 1f/s\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"{\n let i = 0;\n while (true) {\n yield await Promises.tick(1000, ++i) + 1;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"step4 = md` ### How to use ${code('await')} in Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`\n**The implicit await of promises** only happens across cell boundaries. So, **if** you create a promise and then refer to it **within the same cell**, you’ll **see the Promise object and not the resolved value**:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"how_to_use_await = {\n let promise = Promises.delay(3000, \"Hello, \");\n return promise + \"world!\"; // 💥 Oops!\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`You can use the ${code('await')} operator to pause the execution of code in the current cell while you wait for a promise to resolve:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"{\n let greeting = await Promises.delay(3000, \"Hello, \");\n return greeting + \"world!\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`Equivalently, you can use ${code('promise.then')} to chain promises:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"Promises.delay(3000, \"Hello, \").then(greeting => greeting + \"world!\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"require_return_promise = md` ### ${code(\"require\")} as async func\n\nPromises are also used in a few other standard library methods. For example, if you require a third-party library from npm (or use dynamic import), you’ll get a promise to the loaded module.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require(\"d3-fetch@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"{\n let d3 = require(\"d3-fetch@1\");\n return \"what is inside d3 now? \" + d3;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"{\n let d3 = require(\"d3-fetch@1\");\n return \"what is inside d3 now? \" + await d3;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"{\n let d3 = await require(\"d3-fetch@1\");\n return \"what is inside d3.blob now? \" + d3.blob;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"how_to_use_Promise_callback = md` ### How to use ${code('callback')} in Observable\n\nSome libraries and methods use asynchronous callbacks. For example, the browser built-in [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) doesn’t return a promise like Promises.delay; instead it calls the specified *callback* function after the specified *delay*. To use callbacks in Observable, you should adapt to promises using the Promise constructor. For example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"new Promise((resolve, reject) => { // I promise to do something but I may succeed (resolve) or fail (reject)\n setTimeout(() => { // somehow, to do the things take me 5 seconds\n resolve(\"Time’s up!\"); // and I succeed, so I deliver \"Time's up\" as the outcome\n }, 5000); \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"Promises.delay(5000, \"Time's up!\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"then_catch_finally = new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve(\"Time’s up!\");\n }, 5000);\n}).then(res => res + \" Hello\") // now you received my promise outcome(success), can do whatever you like with the my promise outcome","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"await Promises.delay(5000, \"Time's up!\") + \" Hello\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"new Promise((resolve, reject) => {\n setTimeout(() => {\n reject(\"I have failed to keep the promise!\"); // after I promised doing something, I may fail and I inform you with the reject outcome\n }, 5000);\n}).catch(res => res + \" Sorry!\") // you can still do whatever you like with the reject outcome","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"new Promise((resolve, reject) => {\n setTimeout(() => {\n reject(new Error(\"I have failed to keep the promise!\")); // after I promised doing something, I may fail and I inform you with the reject outcome\n }, 5000);\n}).catch(res => res + \" Sorry!\") // you can still do whatever you like with the reject outcome","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"new Promise((resolve, reject) => {\n setTimeout(() => {\n reject(new Error(\"I have failed to keep the promise!\")); // after I promised doing something, I may fail and I inform you with the reject outcome\n }, 5000);\n}).then(null, res => res + \" Sorry!\") // equivalent to catch(res => res + \" Sorry!\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"new Promise((resolve, reject) => {\n setTimeout(() => {\n reject(new Error(\"I have failed to keep the promise!\")); // after I promised doing something, I may fail and I inform you with the reject outcome\n }, 5000);\n}).finally(() => console.log(\"I don't know what inside reject above: \")) // finally does not touch on reject or resolve outcome\n .then(null, res => res + \" Sorry!\") ","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"fetch_json = fetch('https://raw.githubusercontent.com/javascript-tutorial/en.javascript.info/master/1-js/11-async/03-promise-chaining/user.json') // return a promise which resolve(response)\n // .then below runs when the remote server responds\n .then(function(response) {\n // response.text() returns a new promise that resolves with the full response text\n // when it loads\n return response.text();\n })\n .then(function(text) {\n // ...and here's the content of the remote file\n return text; // {\"name\": \"iliakan\", isAdmin: true}\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"// same as above, but response.json() parses the remote content as JSON\nfetch('https://raw.githubusercontent.com/javascript-tutorial/en.javascript.info/master/1-js/11-async/03-promise-chaining/user.json') \n .then(response => response.json())\n .then(user => user.name); // iliakan, got user name","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"long_promise_chain = fetch('https://raw.githubusercontent.com/javascript-tutorial/en.javascript.info/master/1-js/11-async/03-promise-chaining/user.json')// return a promise which resolve(response)\n .then(response => response.json())\n .then(user => fetch(`https://api.github.com/users/${user.name}`))\n .then(response => response.json())\n .then(githubUser => new Promise(function(resolve, reject) { \n // create another promise and offer resolve(githubUser)\n let img = document.createElement('img');\n img.src = githubUser.avatar_url;\n img.className = \"promise-avatar-example\";\n document.body.append(img);\n setTimeout(() => {\n img.remove();\n resolve(githubUser); // (**)\n }, 3000);\n }))\n // triggers after 3 seconds\n .then(githubUser => `Finished showing ${githubUser.name}`);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"{\n function loadJson(url) {\n return fetch(url)\n .then(response => response.json());\n }\n\n function loadGithubUser(name) {\n return fetch(`https://api.github.com/users/${name}`)\n .then(response => response.json());\n }\n\n function showAvatar(githubUser) {\n return new Promise(function(resolve, reject) {\n let img = document.createElement('img');\n img.src = githubUser.avatar_url;\n img.className = \"promise-avatar-example\";\n document.body.append(img);\n\n setTimeout(() => {\n img.remove();\n resolve(githubUser);\n }, 3000);\n });\n }\n\n // Use them:\n var res = loadJson('https://raw.githubusercontent.com/javascript-tutorial/en.javascript.info/master/1-js/11-async/03-promise-chaining/user.json')\n .then(user => loadGithubUser(user.name))\n .then(showAvatar)\n .then(githubUser => `Finished showing ${githubUser.name}`);\n // ...\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"import {code} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"md ` ## How callback work as promise\n\n${webpage(1000, 500, \"https://javascript.info/callbacks\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"html`\n

\n \n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"md `## Promise at work\n\n${webpage(1000, 500, \"https://javascript.info/promise-basics\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"html`\n

\n \n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md `## Promise chain\n\nsource [explained](https://javascript.info/promise-chaining)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"webpage(1000, 500, \"https://javascript.info/promise-chaining#bigger-example-fetch\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md `## Promise handling error\n\n${webpage(1000, 500, \"https://javascript.info/promise-error-handling\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"import {videoyt, webpage} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}