title
16.11: Promises Part 1 - Topics of JavaScript/ES6
description
What is a JavaScript Promise?
🎥 Next Video: https://youtu.be/AwyoVjVXnLk
🔗 Giphy API: https://developers.giphy.com/
🔗 Wordnik API: https://developer.wordnik.com/
🔗 Promise on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
🔗 Fetch on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
🎥 Giphy API Tutorial: https://youtu.be/mj8_w11MvH8
🎥 Wordnik API Tutorial: https://youtu.be/YsgdUaOrFnQ
🎥 let vs var: https://youtu.be/q8SHaDQdul0
🎥 ES6 Arrow Function: https://youtu.be/mrYMzpbFz18
🚂 Website: http://thecodingtrain.com/
💖 Patreon: https://patreon.com/codingtrain
🛒 Store: https://www.designbyhumans.com/shop/codingtrain/
📚 Book recommendations: https://www.amazon.com/shop/thecodingtrain
💻 https://github.com/CodingTrain/website
🎥 For more videos on ES6/JavaScript: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YgpA3Oht-7B4NBQwFVe3pr
🎥 For more Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🔗 https://p5js.org/
🔗 https://processing.org
📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct
detail
{'title': '16.11: Promises Part 1 - Topics of JavaScript/ES6', 'heatmap': [{'end': 107.333, 'start': 73.506, 'weight': 0.796}, {'end': 323.141, 'start': 297.155, 'weight': 0.761}, {'end': 420.32, 'start': 401.81, 'weight': 0.741}, {'end': 448.851, 'start': 432.099, 'weight': 1}, {'end': 568.154, 'start': 515.962, 'weight': 0.796}, {'end': 612.659, 'start': 595.61, 'weight': 0.918}, {'end': 754.711, 'start': 731.232, 'weight': 0.71}, {'end': 971.458, 'start': 938.143, 'weight': 0.78}], 'summary': "Discusses javascript promises, emphasizing their importance for developers and highlighting their benefits in handling asynchronous operations, avoiding 'callback hell', and simplifying code. it covers the usage of promises in p5.js, the native fetch function, arrow notation, fetch function for api calls, and async/await for code sequencing and management.", 'chapters': [{'end': 279.117, 'segs': [{'end': 107.333, 'src': 'heatmap', 'start': 24.787, 'weight': 0, 'content': [{'end': 29.952, 'text': 'And it used to be something that was part of certain libraries that you could import and add to your code.', 'start': 24.787, 'duration': 5.165}, {'end': 41.321, 'text': 'Now, as of I think ES6, which is ES 2015, whatever, as of a more recent version of JavaScript, Promises are something native to how JavaScript works.', 'start': 30.412, 'duration': 10.909}, {'end': 47.286, 'text': 'So I hope this video will answer the question for myself as well as you why should you care about this?', 'start': 41.642, 'duration': 5.644}, {'end': 50.869, 'text': 'What is a promise and how do you make use of a promise?', 'start': 47.826, 'duration': 3.043}, {'end': 53.193, 'text': 'So the demonstration.', 'start': 51.792, 'duration': 1.401}, {'end': 56.755, 'text': 'so I have a JavaScript program already running.', 'start': 53.193, 'duration': 3.562}, {'end': 64.34, 'text': 'And I think a good way to demonstrate this is to look at making requests for data from APIs.', 'start': 57.756, 'duration': 6.584}, {'end': 69.183, 'text': 'So I am making a request for a random word from the Wordnik API.', 'start': 64.68, 'duration': 4.503}, {'end': 73.266, 'text': 'And then I am asking the Giphy API for a GIF associated with that word.', 'start': 69.483, 'duration': 3.783}, {'end': 74.827, 'text': 'So if I refresh this page.', 'start': 73.506, 'duration': 1.321}, {'end': 76.088, 'text': 'There we go.', 'start': 75.507, 'duration': 0.581}, {'end': 77.909, 'text': 'I refresh this page again.', 'start': 76.108, 'duration': 1.801}, {'end': 78.93, 'text': 'There we go.', 'start': 78.39, 'duration': 0.54}, {'end': 80.892, 'text': "So this is the demonstration I'm going to use.", 'start': 79.21, 'duration': 1.682}, {'end': 86.657, 'text': 'Now, at present, the code for this is using the p5.js library with callbacks.', 'start': 80.912, 'duration': 5.745}, {'end': 87.998, 'text': 'There are no promises involved.', 'start': 86.777, 'duration': 1.221}, {'end': 94.063, 'text': 'There is a loadJSON function that passes in the URL to a particular API.', 'start': 88.358, 'duration': 5.705}, {'end': 97.967, 'text': 'It has a callback for when the data is ready.', 'start': 94.464, 'duration': 3.503}, {'end': 107.333, 'text': 'Then I get that data, and then I go Ask load JSON again with another URL and then I who then I have another callback.', 'start': 98.207, 'duration': 9.126}], 'summary': 'Promises in javascript are now native from es6 onwards, demonstrated using apis for data retrieval and processing.', 'duration': 50.04, 'max_score': 24.787, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM24787.jpg'}, {'end': 176.666, 'src': 'embed', 'start': 149.316, 'weight': 3, 'content': [{'end': 153.077, 'text': "Now, I've written this in a weird sort of way, where I call load JSON.", 'start': 149.316, 'duration': 3.761}, {'end': 154.778, 'text': "OK, that's just way too distracting.", 'start': 153.137, 'duration': 1.641}, {'end': 160.46, 'text': 'Where I call load JSON, and then, but you might imagine that you use anonymous functions.', 'start': 154.818, 'duration': 5.642}, {'end': 167.682, 'text': "So when I call load JSON, instead of having this separate data function, I'm going to take this up here, and I'm going to put this in here.", 'start': 160.8, 'duration': 6.882}, {'end': 174.364, 'text': "Why is this so? And then I'm going to, I don't need it to be a name, I'm just going to pass the callback in here directly.", 'start': 168.282, 'duration': 6.082}, {'end': 176.666, 'text': 'OK, so this is perfectly normal to do.', 'start': 174.744, 'duration': 1.922}], 'summary': 'Discussing restructuring code to use anonymous functions for load json, making it more efficient.', 'duration': 27.35, 'max_score': 149.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM149316.jpg'}], 'start': 0.289, 'title': 'Javascript promises', 'summary': "Discusses the transition of javascript promises to native implementation, emphasizing their importance for developers and highlighting the benefits of using promises to handle asynchronous operations and avoid 'callback hell'. it includes demonstrations of using promises for making api requests and emphasizes code sustainability and readability.", 'chapters': [{'end': 47.286, 'start': 0.289, 'title': 'Javascript promises overview', 'summary': 'Explains the transition of javascript promises from being part of certain libraries to native implementation in more recent versions, emphasizing the importance of understanding promises in javascript for developers working with callbacks.', 'duration': 46.997, 'highlights': ['The transition of JavaScript promises from being part of certain libraries to native implementation in more recent versions', 'The importance of understanding promises in JavaScript for developers working with callbacks']}, {'end': 279.117, 'start': 47.826, 'title': 'Introduction to promises in javascript', 'summary': "Introduces the concept of promises in javascript, highlighting the challenges of using callbacks for sequencing asynchronous tasks and the benefits of using promises for handling asynchronous operations and avoiding 'callback hell'. the speaker demonstrates the use of promises in making requests to apis and emphasizes the sustainability and readability of code when using promises.", 'duration': 231.291, 'highlights': ['The speaker demonstrates making requests for data from APIs and highlights the use of promises in retrieving a random word from the Wordnik API and a GIF associated with that word from the Giphy API. Demonstrates making requests for data from APIs', "The speaker explains the challenges of using callbacks for sequencing asynchronous tasks, emphasizing the unwieldiness and indentation issues that arise from multiple nested callbacks, leading to 'callback hell'. Emphasizes the challenges of using callbacks for sequencing asynchronous tasks", 'The speaker introduces the concept of promises as objects, highlighting their potential to simplify code and address the issues associated with callback hell by handling asynchronous operations more effectively. Introduces the concept of promises as objects']}], 'duration': 278.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM289.jpg', 'highlights': ['Native implementation of JavaScript promises in recent versions', 'Importance of understanding promises for developers working with callbacks', 'Demonstrations of using promises for making API requests', 'Challenges of using callbacks for sequencing asynchronous tasks', 'Introduction of promises as objects to simplify code and address callback hell']}, {'end': 677.288, 'segs': [{'end': 323.141, 'src': 'heatmap', 'start': 297.155, 'weight': 0.761, 'content': [{'end': 304.376, 'text': 'So the idea is instead of passing a function a callback, you ask a function for a promise.', 'start': 297.155, 'duration': 7.221}, {'end': 311.558, 'text': "So, because the p5.js library doesn't support promises and I am here to teach or learn which one.", 'start': 304.796, 'duration': 6.762}, {'end': 313.458, 'text': "I'm not sure yet about promises.", 'start': 311.558, 'duration': 1.9}, {'end': 323.141, 'text': "I'm going to instead use a function called fetch, which is a function native to JavaScript in the browser that supports promises.", 'start': 314.318, 'duration': 8.823}], 'summary': 'Teaching/learning about using fetch function for promises in p5.js', 'duration': 25.986, 'max_score': 297.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM297155.jpg'}, {'end': 431.759, 'src': 'heatmap', 'start': 401.81, 'weight': 0, 'content': [{'end': 404.571, 'text': 'I can use something called then and or catch.', 'start': 401.81, 'duration': 2.761}, {'end': 420.32, 'text': "then is a function that receives a function to be executed, it's kind of like a callback, when it has been fulfilled.", 'start': 410.26, 'duration': 10.06}, {'end': 431.759, 'text': 'And catch receives a function to be executed when it has been, if and when it has been rejected.', 'start': 423.633, 'duration': 8.126}], 'summary': 'Using then and catch functions for callback and rejection handling.', 'duration': 37.693, 'max_score': 401.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM401810.jpg'}, {'end': 456.377, 'src': 'heatmap', 'start': 432.099, 'weight': 1, 'content': [{'end': 438.424, 'text': "And there's actually, if we go back, if we go to the Mozilla JavaScript documentation page, there's a nice diagram.", 'start': 432.099, 'duration': 6.325}, {'end': 440.525, 'text': "So this idea of a promise, it's pending.", 'start': 438.444, 'duration': 2.081}, {'end': 446.349, 'text': "And you can see all this stuff that happens, but in the end, there's just a then or a catch.", 'start': 440.846, 'duration': 5.503}, {'end': 448.851, 'text': 'So this is the basic idea.', 'start': 447.25, 'duration': 1.601}, {'end': 454.135, 'text': "So what I'm going to do now is I'm going to start to rewrite that code using promises.", 'start': 449.212, 'duration': 4.923}, {'end': 456.377, 'text': 'Now I should be explicit about a couple of things.', 'start': 454.175, 'duration': 2.202}], 'summary': 'Introduction to promises in javascript with mozilla documentation reference.', 'duration': 24.278, 'max_score': 432.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM432099.jpg'}, {'end': 568.154, 'src': 'heatmap', 'start': 515.962, 'weight': 0.796, 'content': [{'end': 523.287, 'text': "And I'm going to say, let promise equals fetch Word Nick API.", 'start': 515.962, 'duration': 7.325}, {'end': 528.21, 'text': "And then I'm going to say, console log promise.", 'start': 523.967, 'duration': 4.243}, {'end': 532.218, 'text': "So let's take a look and see what this is.", 'start': 530.236, 'duration': 1.982}, {'end': 535.06, 'text': 'Look at that.', 'start': 534.68, 'duration': 0.38}, {'end': 537.743, 'text': 'And at the moment, that promise is pending.', 'start': 535.541, 'duration': 2.202}, {'end': 539.364, 'text': 'Look, the promise is pending.', 'start': 538.083, 'duration': 1.281}, {'end': 540.365, 'text': "Now, here's the thing.", 'start': 539.605, 'duration': 0.76}, {'end': 549.073, 'text': "I'm going to do something very silly, which is actually, let me do this in, let's do another one here.", 'start': 540.465, 'duration': 8.608}, {'end': 553.878, 'text': "Let p equal, let's do this again just in the console.", 'start': 549.454, 'duration': 4.424}, {'end': 556.204, 'text': "And let's look at that.", 'start': 555.603, 'duration': 0.601}, {'end': 557.665, 'text': "It's resolved.", 'start': 557.064, 'duration': 0.601}, {'end': 568.154, 'text': "A few moments later, it's resolved, right? So at the next line of code, so I could do something crazy like while promise is not resolved.", 'start': 557.885, 'duration': 10.269}], 'summary': 'Using fetch word nick api, promise is pending, then resolved.', 'duration': 52.192, 'max_score': 515.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM515962.jpg'}, {'end': 568.154, 'src': 'embed', 'start': 538.083, 'weight': 1, 'content': [{'end': 539.364, 'text': 'Look, the promise is pending.', 'start': 538.083, 'duration': 1.281}, {'end': 540.365, 'text': "Now, here's the thing.", 'start': 539.605, 'duration': 0.76}, {'end': 549.073, 'text': "I'm going to do something very silly, which is actually, let me do this in, let's do another one here.", 'start': 540.465, 'duration': 8.608}, {'end': 553.878, 'text': "Let p equal, let's do this again just in the console.", 'start': 549.454, 'duration': 4.424}, {'end': 556.204, 'text': "And let's look at that.", 'start': 555.603, 'duration': 0.601}, {'end': 557.665, 'text': "It's resolved.", 'start': 557.064, 'duration': 0.601}, {'end': 568.154, 'text': "A few moments later, it's resolved, right? So at the next line of code, so I could do something crazy like while promise is not resolved.", 'start': 557.885, 'duration': 10.269}], 'summary': 'Demonstrating promise resolution in javascript.', 'duration': 30.071, 'max_score': 538.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM538083.jpg'}, {'end': 622.143, 'src': 'heatmap', 'start': 595.61, 'weight': 0.918, 'content': [{'end': 600.593, 'text': "I'm just doing this in kind of a crazy way, and then I will condense it down, and then I write my got data function.", 'start': 595.61, 'duration': 4.983}, {'end': 605.757, 'text': "Let's run this.", 'start': 605.157, 'duration': 0.6}, {'end': 606.818, 'text': 'So take a look at this.', 'start': 606.037, 'duration': 0.781}, {'end': 607.678, 'text': 'Looks a little weird.', 'start': 607.018, 'duration': 0.66}, {'end': 608.538, 'text': "Let's run this now.", 'start': 607.698, 'duration': 0.84}, {'end': 612.659, 'text': 'So I got..', 'start': 611.299, 'duration': 1.36}, {'end': 615.42, 'text': 'Oh, yeah, I forgot.', 'start': 612.659, 'duration': 2.761}, {'end': 616.361, 'text': 'Oh, this is great.', 'start': 615.62, 'duration': 0.741}, {'end': 622.143, 'text': 'I forgot the fetch function has some weird properties, which is going to cause us a bit of a problem, which is why we need promises.', 'start': 616.561, 'duration': 5.582}], 'summary': 'Coding process encounters issues due to fetch function, requiring promises.', 'duration': 26.533, 'max_score': 595.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM595610.jpg'}], 'start': 279.157, 'title': 'Using promises in javascript', 'summary': 'Discusses the concept of promises in javascript, highlighting the usage of promises in p5.js and the native fetch function, explaining the states of a promise and its practical applications. it also covers the use of then and catch functions for asynchronous handling, the fetch function to obtain promises from urls, and error handling through promise catch function.', 'chapters': [{'end': 393.426, 'start': 279.157, 'title': 'Using promises in javascript', 'summary': 'Discusses the concept of promises in javascript, highlighting the usage of promises in p5.js and the native fetch function, explaining the states of a promise and its practical applications.', 'duration': 114.269, 'highlights': ["The p5.js library doesn't support promises, prompting the use of the native fetch function in JavaScript, which supports promises.", 'A promise can be in one of the three states: pending (while waiting for data), fulfilled (successfully resolved), or rejected (error occurred).', 'The idea of using promises is to work with an object that represents the asynchronous operation, enabling checking its state and handling the results accordingly.']}, {'end': 677.288, 'start': 394.066, 'title': 'Using promises in javascript', 'summary': 'Discusses the concept of promises in javascript, including the use of then and catch functions for asynchronous handling, the fetch function to obtain promises from urls, and error handling through promise catch function.', 'duration': 283.222, 'highlights': ['The chapter discusses the concept of promises in JavaScript It covers the usage of promises, including the then and catch functions for asynchronous handling, and the fetch function to obtain promises from URLs.', 'The use of then and catch functions for asynchronous handling Explains how the then function is used to execute a function when the promise is fulfilled, and the catch function is used to execute a function when the promise is rejected.', 'Demonstrates the fetch function to obtain promises from URLs Shows how the fetch function is used to obtain promises from URLs, and how the data obtained can be handled using the then function.', 'Error handling through promise catch function Illustrates how the promise catch function is used for error handling, with an example of catching and logging an error when the promise is rejected.']}], 'duration': 398.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM279157.jpg', 'highlights': ["The p5.js library doesn't support promises, prompting the use of the native fetch function in JavaScript, which supports promises.", 'The idea of using promises is to work with an object that represents the asynchronous operation, enabling checking its state and handling the results accordingly.', 'The chapter discusses the concept of promises in JavaScript It covers the usage of promises, including the then and catch functions for asynchronous handling, and the fetch function to obtain promises from URLs.', 'The use of then and catch functions for asynchronous handling Explains how the then function is used to execute a function when the promise is fulfilled, and the catch function is used to execute a function when the promise is rejected.', 'Demonstrates the fetch function to obtain promises from URLs Shows how the fetch function is used to obtain promises from URLs, and how the data obtained can be handled using the then function.', 'Error handling through promise catch function Illustrates how the promise catch function is used for error handling, with an example of catching and logging an error when the promise is rejected.', 'A promise can be in one of the three states: pending (while waiting for data), fulfilled (successfully resolved), or rejected (error occurred).']}, {'end': 833.276, 'segs': [{'end': 702.413, 'src': 'embed', 'start': 677.588, 'weight': 0, 'content': [{'end': 685.516, 'text': "I forgot to mention that I'm going to start probably using the JavaScript arrow syntax in the course of looking at promises.", 'start': 677.588, 'duration': 7.928}, {'end': 691.482, 'text': "because it's really helpful and in many ways necessary for working with them effectively.", 'start': 685.996, 'duration': 5.486}, {'end': 699.65, 'text': "So, if you haven't already watched my video or somebody else's video or tutorial about the JavaScript arrow notation, which is this notation,", 'start': 691.522, 'duration': 8.128}, {'end': 702.413, 'text': 'I would suggest you pause and go ahead and watch that.', 'start': 699.65, 'duration': 2.763}], 'summary': 'Using javascript arrow syntax for promises is helpful and necessary for effective work.', 'duration': 24.825, 'max_score': 677.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM677588.jpg'}, {'end': 761.811, 'src': 'heatmap', 'start': 718.319, 'weight': 1, 'content': [{'end': 722.841, 'text': "Almost everything in JavaScript is chained, meaning I'm going to do this function and chain it with the next thing.", 'start': 718.319, 'duration': 4.522}, {'end': 727.724, 'text': 'I can say dot then got data, dot catch got error.', 'start': 723.242, 'duration': 4.482}, {'end': 734.635, 'text': "So this is more likely how you're going to see it written.", 'start': 731.232, 'duration': 3.403}, {'end': 737.437, 'text': "And let's just see, do we still get that? We still get that error.", 'start': 735.115, 'duration': 2.322}, {'end': 743.722, 'text': "And then if I fix it, now we can see we've got that response back correctly.", 'start': 737.757, 'duration': 5.965}, {'end': 749.747, 'text': 'Okay, now how would I really see this? Most likely I would see this with the use of anonymous functions.', 'start': 744.182, 'duration': 5.565}, {'end': 754.711, 'text': 'So this whole thing would end up in here without a name.', 'start': 750.587, 'duration': 4.124}, {'end': 761.811, 'text': 'And then this whole thing would end up in here, also without a name.', 'start': 756.124, 'duration': 5.687}], 'summary': 'Javascript functions are often chained, using dot notation. anonymous functions are commonly used.', 'duration': 43.492, 'max_score': 718.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM718319.jpg'}], 'start': 677.588, 'title': 'Javascript promises with arrow notation', 'summary': 'Discusses the usage of javascript arrow syntax in working with promises, emphasizing its effectiveness in simplifying code and sequencing callbacks. it also highlights the chaining nature of javascript and the benefits of using arrow syntax for simplifying code.', 'chapters': [{'end': 833.276, 'start': 677.588, 'title': 'Javascript promises with arrow notation', 'summary': 'Discusses the usage of javascript arrow syntax in working with promises, emphasizing its effectiveness in simplifying code and sequencing callbacks, and suggesting viewers to familiarize themselves with arrow notation before proceeding. it also highlights the chaining nature of javascript and the benefits of using arrow syntax for simplifying code.', 'duration': 155.688, 'highlights': ['The chapter emphasizes the importance of using JavaScript arrow syntax in working with promises, highlighting its helpfulness and necessity for effective code writing.', 'The usage of anonymous functions with promises is discussed, demonstrating how the arrow syntax can further enhance code readability and sequencing of callbacks.', 'The concept of chaining in JavaScript is highlighted, showcasing how promises are commonly written and the ease of sequencing callbacks using dot then notation.', 'The chapter suggests viewers to watch a video or tutorial on JavaScript arrow notation before proceeding with the content, emphasizing its significance in understanding promises effectively.']}], 'duration': 155.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM677588.jpg', 'highlights': ['The chapter emphasizes the importance of using JavaScript arrow syntax in working with promises, highlighting its helpfulness and necessity for effective code writing.', 'The usage of anonymous functions with promises is discussed, demonstrating how the arrow syntax can further enhance code readability and sequencing of callbacks.', 'The concept of chaining in JavaScript is highlighted, showcasing how promises are commonly written and the ease of sequencing callbacks using dot then notation.', 'The chapter suggests viewers to watch a video or tutorial on JavaScript arrow notation before proceeding with the content, emphasizing its significance in understanding promises effectively.']}, {'end': 1134.936, 'segs': [{'end': 971.458, 'src': 'heatmap', 'start': 912.561, 'weight': 0, 'content': [{'end': 919.764, 'text': 'I want to say when the data comes back, call dot JSON and then guess what? So this is really the response.', 'start': 912.561, 'duration': 7.203}, {'end': 935.762, 'text': 'Convert that to JSON and then take the JSON and console log log that, which is like this.', 'start': 922.706, 'duration': 13.056}, {'end': 937.923, 'text': "All right, let's take a look at this.", 'start': 936.742, 'duration': 1.181}, {'end': 941.585, 'text': 'So now you can see how my sequencing is much easier to manage.', 'start': 938.143, 'duration': 3.442}, {'end': 943.185, 'text': "I don't have callback hell.", 'start': 941.625, 'duration': 1.56}, {'end': 946.607, 'text': 'I actually just have the things that have to happen one line after the other.', 'start': 943.426, 'duration': 3.181}, {'end': 948.388, 'text': 'Boy, this is tough stuff.', 'start': 947.407, 'duration': 0.981}, {'end': 952.274, 'text': 'Whoops There we go.', 'start': 950.589, 'duration': 1.685}, {'end': 953.854, 'text': 'And now you can see I have that word.', 'start': 952.474, 'duration': 1.38}, {'end': 962.036, 'text': "So let's get a little bit better here because what I really needed to do was call my createP function to make that paragraph.", 'start': 955.535, 'duration': 6.501}, {'end': 963.856, 'text': "So I'm going to do this.", 'start': 962.676, 'duration': 1.18}, {'end': 969.117, 'text': "So let's take a look at this.", 'start': 967.897, 'duration': 1.22}, {'end': 971.458, 'text': "Let's just put that in there now.", 'start': 969.317, 'duration': 2.141}], 'summary': 'Sequencing and managing data without callback hell, utilizing createp function for better output.', 'duration': 30.624, 'max_score': 912.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM912561.jpg'}], 'start': 833.316, 'title': 'Using fetch and promises for api calls and data handling', 'summary': 'Explains the usage of the fetch function for making api calls, handling promises, and converting response data to json, resulting in easier sequencing and avoiding callback hell. it also outlines the challenges and steps involved in using fetch and promises, including the need for proper syntax and sequencing to fetch data from wordnic and giphy apis and create a paragraph and image based on the responses.', 'chapters': [{'end': 943.185, 'start': 833.316, 'title': 'Using fetch and handling promises', 'summary': 'Explains using the fetch function to make api calls, handling promises, and converting response data to json, resulting in easier sequencing and avoiding callback hell.', 'duration': 109.869, 'highlights': ['The fetch function returns a promise, and the response data needs to be converted to a JSON object using the dot JSON function for usability.', 'Handling promises and converting response data to JSON makes sequencing easier and helps in avoiding callback hell.', 'The process involves using fetch to make API calls, handling the returned promise, and utilizing the dot JSON function to convert the response data into a usable object.']}, {'end': 1134.936, 'start': 943.426, 'title': 'Implementing fetch and promises', 'summary': 'Outlines the challenges and steps involved in using fetch and promises, including the need for proper syntax and sequencing, to fetch data from wordnic and giphy apis and create a paragraph and image based on the responses.', 'duration': 191.51, 'highlights': ['Using fetch and promises to request data from WordNIC and Giphy APIs and create a paragraph and image. The chapter discusses the usage of fetch and promises to sequentially request data from WordNIC and Giphy APIs and create a paragraph and image based on the responses.', 'The need for proper syntax and sequencing when using JavaScript arrow syntax and handling multiple lines of code. It emphasizes the importance of correct syntax and sequencing, especially when using JavaScript arrow syntax and handling multiple lines of code, to ensure the proper execution of the tasks involved.', 'Challenges and errors in the implementation process, highlighting the difficulty in understanding concise yet sequential code. It mentions the challenges and errors encountered during the implementation process, underscoring the difficulty in understanding concise yet sequential code and the presence of potential errors.']}], 'duration': 301.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM833316.jpg', 'highlights': ['The fetch function returns a promise, and the response data needs to be converted to a JSON object using the dot JSON function for usability.', 'Handling promises and converting response data to JSON makes sequencing easier and helps in avoiding callback hell.', 'Using fetch and promises to request data from WordNIC and Giphy APIs and create a paragraph and image.']}, {'end': 1482.538, 'segs': [{'end': 1174.448, 'src': 'embed', 'start': 1140.612, 'weight': 3, 'content': [{'end': 1141.432, 'text': "Let's see how far we get.", 'start': 1140.612, 'duration': 0.82}, {'end': 1145.313, 'text': 'All right, so good news, I got the word.', 'start': 1142.692, 'duration': 2.621}, {'end': 1148.894, 'text': 'Sketch.js 18, JSON of undefined.', 'start': 1145.993, 'duration': 2.901}, {'end': 1156.415, 'text': '18, wait, why did that say 18? Let me run this again.', 'start': 1153.455, 'duration': 2.96}, {'end': 1158.116, 'text': 'Sketch 14, sorry.', 'start': 1157.095, 'duration': 1.021}, {'end': 1161.276, 'text': "All right, so here's the thing.", 'start': 1158.576, 'duration': 2.7}, {'end': 1169.358, 'text': 'Promises are chainable, right? What are the things that return a promise? Fetch returns a promise.', 'start': 1162.517, 'duration': 6.841}, {'end': 1170.927, 'text': 'which is here.', 'start': 1170.387, 'duration': 0.54}, {'end': 1174.448, 'text': '.json also returns a promise.', 'start': 1172.667, 'duration': 1.781}], 'summary': 'Discussion on chaining promises with fetch and .json methods.', 'duration': 33.836, 'max_score': 1140.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM1140612.jpg'}, {'end': 1391.438, 'src': 'embed', 'start': 1343.574, 'weight': 0, 'content': [{'end': 1346.015, 'text': "I'm really sound effect challenged.", 'start': 1343.574, 'duration': 2.441}, {'end': 1346.635, 'text': 'So there we go.', 'start': 1346.175, 'duration': 0.46}, {'end': 1347.855, 'text': "So I'm just going to now.", 'start': 1346.755, 'duration': 1.1}, {'end': 1354.263, 'text': "now that we see this full sequence here, I'm gonna go back and remove.", 'start': 1347.855, 'duration': 6.408}, {'end': 1356.964, 'text': 'I kind of like using the once.', 'start': 1354.263, 'duration': 2.701}, {'end': 1359.245, 'text': "I'm already using the arrow syntax.", 'start': 1356.964, 'duration': 2.281}, {'end': 1366.668, 'text': 'I like to have that shorthand when possible, because it does make it easier for me to follow the code.', 'start': 1359.245, 'duration': 7.423}, {'end': 1374.029, 'text': "So I think I'm going to keep the curly brackets here because this is kind of a long thing to do.", 'start': 1368.766, 'duration': 5.263}, {'end': 1375.269, 'text': 'So now we can see.', 'start': 1374.329, 'duration': 0.94}, {'end': 1378.771, 'text': 'There might be some other simplifications that I can write to this.', 'start': 1375.89, 'duration': 2.881}, {'end': 1382.573, 'text': "And there's a lot of extra steps just because of the way that fetch works.", 'start': 1379.211, 'duration': 3.362}, {'end': 1391.438, 'text': 'But this really shows if I had to do this without promises, this code would become really unwieldy and difficult to manage and write.', 'start': 1383.013, 'duration': 8.425}], 'summary': 'The transcript discusses the use of arrow syntax and the advantage of using promises in code for better manageability.', 'duration': 47.864, 'max_score': 1343.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM1343574.jpg'}, {'end': 1439.47, 'src': 'embed', 'start': 1413.59, 'weight': 1, 'content': [{'end': 1418.674, 'text': 'So can I come over here? So I need to show promises.all.', 'start': 1413.59, 'duration': 5.084}, {'end': 1424.118, 'text': 'I need to show how to make your own promises.', 'start': 1421.496, 'duration': 2.622}, {'end': 1426.18, 'text': 'How to make your own promises.', 'start': 1424.579, 'duration': 1.601}, {'end': 1433.025, 'text': "I'm going to just title the video How to Make Your Promises and maybe people who don't know any certain code would just want to know about how to make your own promises.", 'start': 1426.42, 'duration': 6.605}, {'end': 1436.468, 'text': 'How to make your own promises.', 'start': 1433.365, 'duration': 3.103}, {'end': 1439.47, 'text': 'How to promise-ify something.', 'start': 1437.088, 'duration': 2.382}], 'summary': 'Video tutorial on making your own promises for coding beginners.', 'duration': 25.88, 'max_score': 1413.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM1413590.jpg'}], 'start': 1140.612, 'title': 'Promises and async/await in javascript', 'summary': 'Covers understanding promises, their chainability, and the importance of explicitly returning promises. it also demonstrates the use of promises and async/await in javascript to simplify code sequencing and management, including the introduction of promises.all and creating custom promises.', 'chapters': [{'end': 1313.761, 'start': 1140.612, 'title': 'Understanding promises and chaining', 'summary': 'Explains the concept of promises, their chainability, and the importance of explicitly returning promises in the chain, with an example of using fetch to handle promises and potential errors.', 'duration': 173.149, 'highlights': ['Promises are chainable, and it is important to explicitly return promises in the chain for proper sequencing. The speaker emphasizes the need to explicitly return promises in the chain for proper sequencing, highlighting the importance of this concept in promise handling.', 'Using fetch to handle promises, converting response to JSON, and catching potential errors demonstrate the practical application of promises. The speaker provides an example of using fetch to handle promises, converting response to JSON, and catching potential errors, showcasing the practical application of promises in handling asynchronous operations.', "Each step in the promise chain involves potential errors, and the catch block ensures that any error at any stage is caught and handled. The speaker explains how each step in the promise chain involves potential errors and highlights the catch block's role in catching and handling errors at any stage of the asynchronous operations."]}, {'end': 1482.538, 'start': 1314.122, 'title': 'Using promises and async/await in javascript', 'summary': 'Demonstrates the use of promises and async/await in javascript to simplify code sequencing and management, including the introduction of promises.all and how to make your own promises.', 'duration': 168.416, 'highlights': ['The chapter demonstrates how promises and async/await can simplify code sequencing and management, making it easier to follow the code and avoid unwieldy, difficult-to-manage code without promises.', 'Introduces the use of promises.all to create a big array of promises, waiting for all to complete before triggering an action.', "Explains the process of making your own promises and 'promise-ifying' something, providing practical knowledge for those new to coding.", 'Discusses the use of async and await keywords in ES 427, a recent version of JavaScript, as a means to further simplify and enhance code structure and functionality.']}], 'duration': 341.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QO4NXhWo_NM/pics/QO4NXhWo_NM1140612.jpg', 'highlights': ['Promises are chainable, and it is important to explicitly return promises in the chain for proper sequencing.', 'Using fetch to handle promises, converting response to JSON, and catching potential errors demonstrate the practical application of promises.', 'Each step in the promise chain involves potential errors, and the catch block ensures that any error at any stage is caught and handled.', 'The chapter demonstrates how promises and async/await can simplify code sequencing and management.', 'Introduces the use of promises.all to create a big array of promises, waiting for all to complete before triggering an action.', "Explains the process of making your own promises and 'promise-ifying' something, providing practical knowledge for those new to coding.", 'Discusses the use of async and await keywords in ES 427, a recent version of JavaScript, as a means to further simplify and enhance code structure and functionality.']}], 'highlights': ['The use of async and await keywords in ES 427, a recent version of JavaScript, as a means to further simplify and enhance code structure and functionality.', 'The chapter demonstrates how promises and async/await can simplify code sequencing and management.', 'The fetch function returns a promise, and the response data needs to be converted to a JSON object using the dot JSON function for usability.', 'The chapter suggests viewers to watch a video or tutorial on JavaScript arrow notation before proceeding with the content, emphasizing its significance in understanding promises effectively.', 'The concept of chaining in JavaScript is highlighted, showcasing how promises are commonly written and the ease of sequencing callbacks using dot then notation.', 'The chapter emphasizes the importance of using JavaScript arrow syntax in working with promises, highlighting its helpfulness and necessity for effective code writing.', "The p5.js library doesn't support promises, prompting the use of the native fetch function in JavaScript, which supports promises.", 'Promises are chainable, and it is important to explicitly return promises in the chain for proper sequencing.', 'Using fetch to handle promises, converting response to JSON, and catching potential errors demonstrate the practical application of promises.', 'Each step in the promise chain involves potential errors, and the catch block ensures that any error at any stage is caught and handled.', 'Introduces the use of promises.all to create a big array of promises, waiting for all to complete before triggering an action.', 'Demonstrates the fetch function to obtain promises from URLs Shows how the fetch function is used to obtain promises from URLs, and how the data obtained can be handled using the then function.', 'Handling promises and converting response data to JSON makes sequencing easier and helps in avoiding callback hell.', 'A promise can be in one of the three states: pending (while waiting for data), fulfilled (successfully resolved), or rejected (error occurred).', 'Using fetch and promises to request data from WordNIC and Giphy APIs and create a paragraph and image.', 'The idea of using promises is to work with an object that represents the asynchronous operation, enabling checking its state and handling the results accordingly.', 'The chapter discusses the concept of promises in JavaScript It covers the usage of promises, including the then and catch functions for asynchronous handling, and the fetch function to obtain promises from URLs.', 'Error handling through promise catch function Illustrates how the promise catch function is used for error handling, with an example of catching and logging an error when the promise is rejected.', 'The usage of anonymous functions with promises is discussed, demonstrating how the arrow syntax can further enhance code readability and sequencing of callbacks.', 'Native implementation of JavaScript promises in recent versions', 'Importance of understanding promises for developers working with callbacks', 'Demonstrations of using promises for making API requests', 'Challenges of using callbacks for sequencing asynchronous tasks', 'Introduction of promises as objects to simplify code and address callback hell']}