title
Async JS Crash Course - Callbacks, Promises, Async Await
description
In this crash course we will look at asynchronous JavaScript and cover callbacks, promises including promise.all as well as the async / await syntax.
FULL JS COURSE (Just 10 Bucks!!!!):
https://www.udemy.com/modern-javascript-from-the-beginning/?couponCode=YOUTUBE10
CODE:
https://plnkr.co/4Pv2HhiWV4kiPHY9VrUw
💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia
Follow Traversy Media:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia
detail
{'title': 'Async JS Crash Course - Callbacks, Promises, Async Await', 'heatmap': [], 'summary': 'Tutorial on asynchronous javascript covers basics like callbacks, promises, and async/await, illustrating their relevance in server requests and explaining es6 impact. it demonstrates creating and retrieving posts, and delves into promises, async/await, and handling multiple promises using promise.all.', 'chapters': [{'end': 228.682, 'segs': [{'end': 94.01, 'src': 'embed', 'start': 29.464, 'weight': 0, 'content': [{'end': 34.166, 'text': "but you don't want to wait until that thing is done to continue your program.", 'start': 29.464, 'duration': 4.702}, {'end': 36.287, 'text': "You want to continue while it's happening.", 'start': 34.186, 'duration': 2.101}, {'end': 43.971, 'text': "So it's happening asynchronously, rather than synchronous programming, where something happens and you wait until it's completely finished,", 'start': 36.367, 'duration': 7.604}, {'end': 45.472, 'text': 'until you move on to the next.', 'start': 43.971, 'duration': 1.501}, {'end': 50.475, 'text': 'Now, asynchronous programming is very relevant to JavaScript,', 'start': 46.552, 'duration': 3.923}, {'end': 60.382, 'text': "because we're often making requests to servers elsewhere and it can take a couple seconds to get your data back, for instance,", 'start': 50.475, 'duration': 9.907}, {'end': 64.885, 'text': 'and you might not want your program to stall and wait for that data to come back.', 'start': 60.382, 'duration': 4.503}, {'end': 67.808, 'text': 'You want to keep going and keep doing something.', 'start': 64.926, 'duration': 2.882}, {'end': 76.574, 'text': 'So this is where callbacks come in, and callbacks were used for a long time until ES6 was released, or ES2015,', 'start': 68.728, 'duration': 7.846}, {'end': 79.436, 'text': 'where promises were introduced to the language.', 'start': 76.574, 'duration': 2.862}, {'end': 85.021, 'text': 'And promises give you a more elegant way to handle asynchronous data.', 'start': 80.277, 'duration': 4.744}, {'end': 94.01, 'text': 'And then, I think it was ES7, async await was introduced, which is still dealing with promises, just in a different way.', 'start': 85.501, 'duration': 8.509}], 'summary': 'Asynchronous programming in javascript using promises and async await is relevant for handling requests to servers and avoiding program stalling.', 'duration': 64.546, 'max_score': 29.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s29464.jpg'}, {'end': 138.705, 'src': 'embed', 'start': 111.808, 'weight': 3, 'content': [{'end': 115.609, 'text': "We're actually going to use some of the same code for callbacks and promises,", 'start': 111.808, 'duration': 3.801}, {'end': 120.391, 'text': 'so you can see what you have to do to basically change it from a callback to a promise.', 'start': 115.609, 'duration': 4.782}, {'end': 129.714, 'text': "We're also going to take a look at promise.all, where, if you are resolving multiple promises, you can do that,", 'start': 121.191, 'duration': 8.523}, {'end': 133.355, 'text': 'call them all at the same time and wait for each one to be done.', 'start': 129.714, 'duration': 3.641}, {'end': 138.705, 'text': 'And a lot of this code is actually from my modern JavaScript from the beginning course on Udemy.', 'start': 134.481, 'duration': 4.224}], 'summary': 'Transitioning from callbacks to promises, exploring promise.all for resolving multiple promises simultaneously.', 'duration': 26.897, 'max_score': 111.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s111808.jpg'}, {'end': 233.77, 'src': 'embed', 'start': 207.732, 'weight': 4, 'content': [{'end': 215.035, 'text': 'but you know i like to create um, you know beginner to intermediate videos on my channel.', 'start': 207.732, 'duration': 7.303}, {'end': 221.577, 'text': "um so people just learning this stuff, you know it's really, it's really important, and i mean there's not a.", 'start': 215.035, 'duration': 6.542}, {'end': 228.682, 'text': "in my opinion, there's not a lot of great resources out there to learn this type of stuff, At least videos.", 'start': 221.577, 'duration': 7.105}, {'end': 233.77, 'text': "you know there's a lot of documentation, but a lot of people don't like reading documentation.", 'start': 228.682, 'duration': 5.088}], 'summary': 'Creates beginner to intermediate videos on channel, addressing lack of resources for learning technical topics.', 'duration': 26.038, 'max_score': 207.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s207732.jpg'}], 'start': 7.27, 'title': 'Asynchronous javascript basics', 'summary': 'Covers the basics of asynchronous javascript, including callbacks, promises, and async await syntax, highlighting their relevance in making requests to servers and the impact of es6 release on callbacks. it also introduces promises and async/await in javascript, exploring their elegant handling of asynchronous data and resemblance to synchronous programming, and delves into the basics of callbacks including their significance in providing learning resources for beginners.', 'chapters': [{'end': 76.574, 'start': 7.27, 'title': 'Asynchronous javascript basics', 'summary': 'Covers the basics of asynchronous javascript, including callbacks, promises, and async await syntax, and highlights the relevance of asynchronous programming in javascript due to making requests to servers and the impact of es6 release on callbacks.', 'duration': 69.304, 'highlights': ['Callbacks, promises, and async await syntax are covered as ways to deal with asynchronous data.', 'Asynchronous programming is relevant to JavaScript due to making requests to servers, where the program can continue while waiting for data to come back.', 'ES6 release impacted the use of callbacks in JavaScript.']}, {'end': 157.34, 'start': 76.574, 'title': 'Javascript async programming overview', 'summary': 'Covers the introduction of promises and async/await in javascript, highlighting their elegant handling of asynchronous data and resemblance to synchronous programming. it also explores the use of promise.all for resolving multiple promises simultaneously and features code from a 21.5-hour javascript course on udemy.', 'duration': 80.766, 'highlights': ['The chapter covers the introduction of promises and async/await in JavaScript, highlighting their elegant handling of asynchronous data and resemblance to synchronous programming.', 'It also explores the use of promise.all for resolving multiple promises simultaneously.', 'Features code from a 21.5-hour JavaScript course on Udemy.']}, {'end': 228.682, 'start': 157.38, 'title': 'Callbacks in javascript', 'summary': 'Covers the basics of callbacks in javascript, including creating an array of blog posts and the significance of providing learning resources for beginners.', 'duration': 71.302, 'highlights': ['The significance of providing learning resources for beginners is emphasized, as there are limited resources available for beginners to learn this type of stuff.', 'The chapter demonstrates the basics of callbacks in JavaScript by creating an array of two blog posts, with titles and body content.']}], 'duration': 221.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s7270.jpg', 'highlights': ['Asynchronous programming is relevant to JavaScript due to making requests to servers, where the program can continue while waiting for data to come back.', 'The chapter covers the introduction of promises and async/await in JavaScript, highlighting their elegant handling of asynchronous data and resemblance to synchronous programming.', 'ES6 release impacted the use of callbacks in JavaScript.', 'It also explores the use of promise.all for resolving multiple promises simultaneously.', 'The significance of providing learning resources for beginners is emphasized, as there are limited resources available for beginners to learn this type of stuff.']}, {'end': 470.31, 'segs': [{'end': 256.684, 'src': 'embed', 'start': 228.682, 'weight': 0, 'content': [{'end': 233.77, 'text': "you know there's a lot of documentation, but a lot of people don't like reading documentation.", 'start': 228.682, 'duration': 5.088}, {'end': 242.292, 'text': 'So what we want to do here is create a function called get posts, and Okay, now, remember,', 'start': 233.77, 'duration': 8.522}, {'end': 248.757, 'text': "we're mimicking how it is to fetch from a server and that could take a couple seconds or whatever.", 'start': 242.292, 'duration': 6.465}, {'end': 251.7, 'text': "So we're gonna use setTimeout here.", 'start': 249.738, 'duration': 1.962}, {'end': 256.684, 'text': 'Okay, setTimeout is just, it takes in a callback function.', 'start': 251.72, 'duration': 4.964}], 'summary': "Creating a 'get posts' function to mimic server fetching with settimeout.", 'duration': 28.002, 'max_score': 228.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s228682.jpg'}, {'end': 308.927, 'src': 'embed', 'start': 280.323, 'weight': 3, 'content': [{'end': 282.565, 'text': "We'll keep this ES6 style.", 'start': 280.323, 'duration': 2.242}, {'end': 291.992, 'text': 'So, inside this setTimeout, the purpose of this is to get these posts here and then put them on the page.', 'start': 283.785, 'duration': 8.207}, {'end': 296.476, 'text': "So, let's create a variable called output.", 'start': 292.733, 'duration': 3.743}, {'end': 298.978, 'text': "We're just going to initialize it to nothing.", 'start': 297.136, 'duration': 1.842}, {'end': 301.2, 'text': 'And then we want to loop through the posts.', 'start': 299.498, 'duration': 1.702}, {'end': 308.927, 'text': "So you could use like a for loop here if you want, but I'm going to use the high order for each method.", 'start': 301.54, 'duration': 7.387}], 'summary': 'Using es6 style, a settimeout function is used to retrieve and display posts on the page.', 'duration': 28.604, 'max_score': 280.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s280323.jpg'}, {'end': 363.764, 'src': 'embed', 'start': 333.767, 'weight': 5, 'content': [{'end': 338.33, 'text': 'And then for each post, we want to add it to the output variable.', 'start': 333.767, 'duration': 4.563}, {'end': 339.891, 'text': "So let's say output.", 'start': 338.49, 'duration': 1.401}, {'end': 342.572, 'text': 'And we want to append.', 'start': 341.332, 'duration': 1.24}, {'end': 344.533, 'text': "So I'm going to say plus equals.", 'start': 342.632, 'duration': 1.901}, {'end': 346.435, 'text': "We'll use some back ticks here.", 'start': 344.974, 'duration': 1.461}, {'end': 353.399, 'text': 'so that we can use template syntax or template literal, whatever it is.', 'start': 347.555, 'duration': 5.844}, {'end': 356.76, 'text': "And then we're going to just put in li's here.", 'start': 354.119, 'duration': 2.641}, {'end': 359.962, 'text': 'And I want the post title.', 'start': 358.481, 'duration': 1.481}, {'end': 362.043, 'text': "So I'm going to use this syntax.", 'start': 360.423, 'duration': 1.62}, {'end': 363.764, 'text': 'So I can put a variable in.', 'start': 362.063, 'duration': 1.701}], 'summary': 'Appending each post to the output variable using template syntax.', 'duration': 29.997, 'max_score': 333.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s333767.jpg'}, {'end': 470.31, 'src': 'embed', 'start': 442.066, 'weight': 1, 'content': [{'end': 448.211, 'text': "And we want to do a setTimeout here as well, because remember, we're hypothetically dealing with a server.", 'start': 442.066, 'duration': 6.145}, {'end': 451.434, 'text': "So let's say setTimeout.", 'start': 449.853, 'duration': 1.581}, {'end': 454.056, 'text': "We'll put an arrow function here.", 'start': 451.474, 'duration': 2.582}, {'end': 457.96, 'text': "And let's say this one takes two seconds, so 2,000 milliseconds.", 'start': 454.757, 'duration': 3.203}, {'end': 470.31, 'text': 'And inside here, all I want to do is take posts and I want to push on to the post array the new post like that.', 'start': 460.567, 'duration': 9.743}], 'summary': 'Using settimeout to simulate server response time of 2 seconds for adding a new post to the array.', 'duration': 28.244, 'max_score': 442.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s442066.jpg'}], 'start': 228.682, 'title': 'Creating getposts function and es6 style post output', 'summary': 'Discusses creating a getposts function with a 1-second delay using settimeout and displaying posts on a web page using es6 syntax, foreach method, and template literal, with a settimeout function simulating server response.', 'chapters': [{'end': 279.282, 'start': 228.682, 'title': 'Creating getposts function with settimeout', 'summary': 'Discusses the creation of a getposts function using settimeout to mimic server fetching, with a delay of 1 second.', 'duration': 50.6, 'highlights': ['The chapter discusses the creation of a getPosts function using setTimeout to mimic server fetching.', 'The setTimeout function is used with a delay of 1,000 milliseconds to mimic the time taken for server fetching.', 'The chapter explains the usage of setTimeout with an arrow function for creating the getPosts function.']}, {'end': 470.31, 'start': 280.323, 'title': 'Es6 style post output', 'summary': 'Explains the process of displaying posts on a web page using es6 syntax, including the use of foreach method and template literal, with a settimeout function to simulate server response.', 'duration': 189.987, 'highlights': ['The chapter explains the process of displaying posts on a web page using ES6 syntax The speaker discusses utilizing ES6 style to display posts on a web page, demonstrating the use of modern JavaScript syntax.', 'including the use of forEach method and template literal The speaker demonstrates the usage of the forEach method and template literal to iterate through posts and build the output for display.', 'with a setTimeout function to simulate server response A setTimeout function is used to simulate server response, providing a delay before displaying the posts on the web page.']}], 'duration': 241.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s228682.jpg', 'highlights': ['The chapter discusses the creation of a getPosts function using setTimeout to mimic server fetching.', 'The setTimeout function is used with a delay of 1,000 milliseconds to mimic the time taken for server fetching.', 'The chapter explains the usage of setTimeout with an arrow function for creating the getPosts function.', 'The chapter explains the process of displaying posts on a web page using ES6 syntax.', 'The speaker discusses utilizing ES6 style to display posts on a web page, demonstrating the use of modern JavaScript syntax.', 'Including the use of forEach method and template literal, the speaker demonstrates the usage of the forEach method and template literal to iterate through posts and build the output for display.', 'With a setTimeout function to simulate server response, a setTimeout function is used to simulate server response, providing a delay before displaying the posts on the web page.']}, {'end': 733.112, 'segs': [{'end': 555.251, 'src': 'embed', 'start': 504.957, 'weight': 0, 'content': [{'end': 507.479, 'text': 'What? Oh, I forgot the function.', 'start': 504.957, 'duration': 2.522}, {'end': 510.12, 'text': 'All right.', 'start': 507.499, 'duration': 2.621}, {'end': 513.605, 'text': 'So there we go.', 'start': 511.824, 'duration': 1.781}, {'end': 516.125, 'text': 'Post one post to where is post three.', 'start': 513.745, 'duration': 2.38}, {'end': 523.668, 'text': "Now the reason that we're not seeing post three is because the create post took longer than the get post.", 'start': 516.806, 'duration': 6.862}, {'end': 525.589, 'text': 'The get post happened in one second.', 'start': 523.727, 'duration': 1.862}, {'end': 529.51, 'text': 'OK Our server returned it in one second.', 'start': 525.609, 'duration': 3.901}, {'end': 538.777, 'text': 'the create post, however, took two seconds, but by the time we ran this create post, this it was the dom was already painted.', 'start': 529.93, 'duration': 8.847}, {'end': 542.7, 'text': "okay, so we can't do anything beyond that point.", 'start': 538.777, 'duration': 3.923}, {'end': 551.407, 'text': 'um so, this is where asynchronous programming comes in, and this is where callbacks come in, which is one way to to handle it.', 'start': 542.7, 'duration': 8.707}, {'end': 552.348, 'text': "so let's do that.", 'start': 551.407, 'duration': 0.941}, {'end': 555.251, 'text': "let's let's actually make this work by using a callback.", 'start': 552.348, 'duration': 2.903}], 'summary': 'The create post took 2 seconds, while the get post took 1 second, introducing the need for asynchronous programming and callbacks.', 'duration': 50.294, 'max_score': 504.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s504957.jpg'}, {'end': 655.285, 'src': 'embed', 'start': 626.793, 'weight': 5, 'content': [{'end': 634.135, 'text': 'Okay, so this is a good example of how callbacks work and why you would use a callback.', 'start': 626.793, 'duration': 7.342}, {'end': 637.076, 'text': "So let's now look at promises.", 'start': 634.135, 'duration': 2.941}, {'end': 641.017, 'text': "Okay, and I'm gonna basically use the same code or start with the same code.", 'start': 637.076, 'duration': 3.941}, {'end': 649.456, 'text': "So we don't need the actual call here So let's grab the posts and the two functions, and let's put them into promises.", 'start': 641.097, 'duration': 8.359}, {'end': 655.285, 'text': "All right, and let's change in index HTML, we'll change this to promises.js.", 'start': 650.918, 'duration': 4.367}], 'summary': 'Demonstrating transition from callbacks to promises in code example.', 'duration': 28.492, 'max_score': 626.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s626793.jpg'}], 'start': 472.01, 'title': 'Posts creation and retrieval, asynchronous programming', 'summary': 'Delves into creating and retrieving posts, with a delay in post creation and one-second post retrieval. it also explains asynchronous programming using callbacks and promises to reduce wait time and enhance code efficiency.', 'chapters': [{'end': 529.51, 'start': 472.01, 'title': 'Creating and retrieving posts', 'summary': 'Explores the process of creating and retrieving posts, encountering a delay in creating a post, with the server returning the retrieved post in one second.', 'duration': 57.5, 'highlights': ['The server returned the retrieved post in one second.', 'The get post happened in one second.', 'The create post took longer than the get post.', 'The reason for not seeing post three is because the create post took longer than the get post.']}, {'end': 733.112, 'start': 529.93, 'title': 'Asynchronous programming with callbacks and promises', 'summary': 'Explains the concept of asynchronous programming, illustrating the use of callbacks and promises in handling asynchronous tasks, with a focus on reducing wait time and improving code efficiency.', 'duration': 203.182, 'highlights': ['The chapter explains the concept of asynchronous programming It introduces the concept of asynchronous programming and the need for handling tasks that may take longer to execute.', 'Illustrating the use of callbacks and promises in handling asynchronous tasks The transcript provides examples of using callbacks and promises to handle asynchronous tasks, demonstrating their role in improving code efficiency and reducing wait time.', 'Focus on reducing wait time and improving code efficiency The chapter emphasizes the importance of reducing wait time for tasks and improving code efficiency by using asynchronous programming concepts like callbacks and promises.']}], 'duration': 261.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s472010.jpg', 'highlights': ['The server returned the retrieved post in one second.', 'The get post happened in one second.', 'The create post took longer than the get post.', 'The reason for not seeing post three is because the create post took longer than the get post.', 'The chapter explains the concept of asynchronous programming It introduces the concept of asynchronous programming and the need for handling tasks that may take longer to execute.', 'Illustrating the use of callbacks and promises in handling asynchronous tasks The transcript provides examples of using callbacks and promises to handle asynchronous tasks, demonstrating their role in improving code efficiency and reducing wait time.', 'Focus on reducing wait time and improving code efficiency The chapter emphasizes the importance of reducing wait time for tasks and improving code efficiency by using asynchronous programming concepts like callbacks and promises.']}, {'end': 1469.749, 'segs': [{'end': 928.66, 'src': 'embed', 'start': 897.764, 'weight': 1, 'content': [{'end': 900.685, 'text': 'More and more libraries are using promises now.', 'start': 897.764, 'duration': 2.921}, {'end': 905.947, 'text': "So you're mostly going to be dealing with the response rather than creating them yourselves.", 'start': 900.765, 'duration': 5.182}, {'end': 909.389, 'text': 'But you should also know how to create them yourself.', 'start': 907.068, 'duration': 2.321}, {'end': 914.492, 'text': 'which is just basically new promise.', 'start': 910.029, 'duration': 4.463}, {'end': 922.777, 'text': "so what i want to do now is look at promise.all, because if you have a lot of different promises, you don't want to,", 'start': 914.492, 'duration': 8.285}, {'end': 928.66, 'text': "you don't want to keep having dot, then dot, then dot, then so you can use promise.all in that case.", 'start': 922.777, 'duration': 5.883}], 'summary': 'Libraries increasingly use promises, emphasizing response handling and creating them. promise.all is useful for managing multiple promises.', 'duration': 30.896, 'max_score': 897.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s897764.jpg'}, {'end': 1010.602, 'src': 'embed', 'start': 958.634, 'weight': 2, 'content': [{'end': 966.657, 'text': "Resolve OK, as long as we resolve it and we'll just say hello.", 'start': 958.634, 'duration': 8.023}, {'end': 976.709, 'text': 'world and then we could say promise to we could just set this to a variable like 10 if we wanted to.', 'start': 968.146, 'duration': 8.563}, {'end': 979.971, 'text': "And then I'm just giving you different examples.", 'start': 976.729, 'duration': 3.242}, {'end': 998.278, 'text': 'We could say new whoops promise three equals new promise and we could pass in function with resolve Reject.', 'start': 980.051, 'duration': 18.227}, {'end': 1004.26, 'text': "And let's set that to, let's do a set timeout.", 'start': 1000.979, 'duration': 3.281}, {'end': 1010.602, 'text': "And we'll call resolve.", 'start': 1008.621, 'duration': 1.981}], 'summary': 'The transcript covers examples of resolving promises and setting variables with 10 as an example.', 'duration': 51.968, 'max_score': 958.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s958634.jpg'}, {'end': 1304.634, 'src': 'embed', 'start': 1277.454, 'weight': 3, 'content': [{'end': 1282.037, 'text': "So we're waiting for this to be done until we move on and call this.", 'start': 1277.454, 'duration': 4.583}, {'end': 1285.119, 'text': 'So now we just need to call a knit.', 'start': 1283.598, 'duration': 1.521}, {'end': 1291.329, 'text': "And let's save and we should see them pop up on the screen.", 'start': 1287.387, 'duration': 3.942}, {'end': 1292.229, 'text': 'And there we go.', 'start': 1291.589, 'duration': 0.64}, {'end': 1293.85, 'text': 'All right.', 'start': 1292.249, 'duration': 1.601}, {'end': 1295.431, 'text': "So that's how a sync await works.", 'start': 1293.95, 'duration': 1.481}, {'end': 1299.072, 'text': "It's just a more elegant way to to handle promises.", 'start': 1295.491, 'duration': 3.581}, {'end': 1304.634, 'text': "Now, if we wanted to use it, like, let's say with fetch, we could do that as well.", 'start': 1300.433, 'duration': 4.201}], 'summary': 'Demonstrating the use of sync await as an elegant way to handle promises.', 'duration': 27.18, 'max_score': 1277.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s1277454.jpg'}, {'end': 1411.688, 'src': 'embed', 'start': 1382.867, 'weight': 0, 'content': [{'end': 1387.273, 'text': "So let's save that and it's not going to do anything because we didn't call it.", 'start': 1382.867, 'duration': 4.406}, {'end': 1388.815, 'text': "So let's call fetch users.", 'start': 1387.373, 'duration': 1.442}, {'end': 1394.576, 'text': 'and save, and there we go.', 'start': 1392.054, 'duration': 2.522}, {'end': 1396.037, 'text': 'so we should get 10 users.', 'start': 1394.576, 'duration': 1.461}, {'end': 1406.044, 'text': "okay, so it's just a a cleaner way of of dealing with promises instead of doing the dot then and all that stuff, and especially with fetch,", 'start': 1396.037, 'duration': 10.007}, {'end': 1408.226, 'text': 'it makes it look even nicer.', 'start': 1406.044, 'duration': 2.182}, {'end': 1411.688, 'text': 'we just have these variables and everything is just one after another.', 'start': 1408.226, 'duration': 3.462}], 'summary': "Using 'fetch' for cleaner promise handling, resulting in 10 users.", 'duration': 28.821, 'max_score': 1382.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s1382867.jpg'}], 'start': 733.252, 'title': 'Javascript promises and async/await', 'summary': 'Covers handling promises in javascript, including resolving and rejecting promises, using .then syntax, .catch for error handling, and async/await with fetch api for cleaner asynchronous processing. it also explains creating and handling multiple promises using promise.all.', 'chapters': [{'end': 872.31, 'start': 733.252, 'title': 'Handling promises in javascript', 'summary': 'Demonstrates handling promises in javascript, including resolving and rejecting promises, using the dot then syntax, handling errors with .catch, and utilizing console.log for error messages.', 'duration': 139.058, 'highlights': ['The chapter includes examples of resolving and rejecting promises in JavaScript, showcasing the use of the dot then syntax and .catch for error handling.', 'The demonstration illustrates passing in a callback, returning a promise, and using the dot then syntax for asynchronous operations.', 'The transcript explains the concept of promises in JavaScript, emphasizing the use of .then for executing operations after a promise is resolved.']}, {'end': 1469.749, 'start': 873.311, 'title': 'Promises, promise.all, async await', 'summary': 'Introduces the concept of promises in javascript, explaining how to create and handle multiple promises using promise.all, and demonstrates the elegant handling of asynchronous processes using async/await with fetch api, providing a cleaner way of dealing with promises without using dot then.', 'duration': 596.438, 'highlights': ['The chapter introduces the concept of promises in JavaScript, explaining how to create and handle multiple promises using promise.all. Promises are commonly used in JavaScript for handling asynchronous operations, such as fetching data from APIs or making HTTP requests.', 'The chapter demonstrates the elegant handling of asynchronous processes using async/await with fetch API, providing a cleaner way of dealing with promises without using dot then. Async/await provides a more elegant and readable way to handle asynchronous operations, making the code look cleaner and more structured.', 'The chapter explains the basics of promises and async/await, providing a refresher for those familiar with the concepts. The content serves as a refresher for those already familiar with promises and async/await, reinforcing the fundamental concepts.']}], 'duration': 736.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PoRJizFvM7s/pics/PoRJizFvM7s733252.jpg', 'highlights': ['The chapter demonstrates the elegant handling of asynchronous processes using async/await with fetch API, providing a cleaner way of dealing with promises without using dot then.', 'The chapter introduces the concept of promises in JavaScript, explaining how to create and handle multiple promises using promise.all.', 'The chapter includes examples of resolving and rejecting promises in JavaScript, showcasing the use of the dot then syntax and .catch for error handling.', 'The chapter explains the basics of promises and async/await, providing a refresher for those familiar with the concepts.']}], 'highlights': ['The chapter demonstrates the elegant handling of asynchronous processes using async/await with fetch API, providing a cleaner way of dealing with promises without using dot then.', 'The chapter introduces the concept of promises in JavaScript, explaining how to create and handle multiple promises using promise.all.', 'The chapter includes examples of resolving and rejecting promises in JavaScript, showcasing the use of the dot then syntax and .catch for error handling.', 'The chapter explains the basics of promises and async/await, providing a refresher for those familiar with the concepts.', 'The chapter covers the introduction of promises and async/await in JavaScript, highlighting their elegant handling of asynchronous data and resemblance to synchronous programming.', 'The chapter explains the concept of asynchronous programming It introduces the concept of asynchronous programming and the need for handling tasks that may take longer to execute.', 'Illustrating the use of callbacks and promises in handling asynchronous tasks The transcript provides examples of using callbacks and promises to handle asynchronous tasks, demonstrating their role in improving code efficiency and reducing wait time.', 'Focus on reducing wait time and improving code efficiency The chapter emphasizes the importance of reducing wait time for tasks and improving code efficiency by using asynchronous programming concepts like callbacks and promises.', 'The chapter discusses the creation of a getPosts function using setTimeout to mimic server fetching.', 'The setTimeout function is used with a delay of 1,000 milliseconds to mimic the time taken for server fetching.', 'The chapter explains the usage of setTimeout with an arrow function for creating the getPosts function.', 'The chapter explains the process of displaying posts on a web page using ES6 syntax.', 'The speaker discusses utilizing ES6 style to display posts on a web page, demonstrating the use of modern JavaScript syntax.', 'Including the use of forEach method and template literal, the speaker demonstrates the usage of the forEach method and template literal to iterate through posts and build the output for display.', 'With a setTimeout function to simulate server response, a setTimeout function is used to simulate server response, providing a delay before displaying the posts on the web page.', 'The server returned the retrieved post in one second.', 'The get post happened in one second.', 'The create post took longer than the get post.', 'The reason for not seeing post three is because the create post took longer than the get post.', 'ES6 release impacted the use of callbacks in JavaScript.', 'It also explores the use of promise.all for resolving multiple promises simultaneously.', 'The significance of providing learning resources for beginners is emphasized, as there are limited resources available for beginners to learn this type of stuff.']}