title
Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await).

description
Check out my courses to become a PRO! https://developedbyed.com/ We are getting closer and closer to launching the Creative Javascript Course. I wanted to share a small portion of the Async Javascript chapter of the course where we will learn everything there is to know about how async code works in javascript. We are going to take a look at all the popular ways async code is being run such as callbacks, promises and the new async await. 🎁Support me on Patreon for exclusive episodes, discord and more! https://www.patreon.com/dev_ed Microphones I Use Audio-Technica AT2020 - https://geni.us/Re78 (Amazon) Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon) BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon) Camera Gear Fujifilm X-T3 - https://geni.us/7IM1 (Amazon) Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon) PC Specs Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon) Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon) AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon) Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon) ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon) Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon) Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon) Logitech G305 - https://geni.us/PIjyn (Amazon) Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon) DISCLAIMERS: I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites. 🛴 Follow me on: Twitch: https://www.twitch.tv/developedbyed Twitter: https://twitter.com/developedbyed Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/developedbyed/ #programming #javascript

detail
{'title': 'Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await).', 'heatmap': [{'end': 1139.282, 'start': 984.145, 'weight': 0.709}, {'end': 1923.125, 'start': 1868.883, 'weight': 0.704}], 'summary': 'Tutorial series covers javascript asynchronous basics, ajax for live web content updates, async and synchronous code behavior, challenges and solutions, including the introduction of promises and async await for simplifying asynchronous code execution and improving efficiency.', 'chapters': [{'end': 237.585, 'segs': [{'end': 50.252, 'src': 'embed', 'start': 22.376, 'weight': 0, 'content': [{'end': 24.557, 'text': "We're going to talk about asynchronous JavaScript.", 'start': 22.376, 'duration': 2.181}, {'end': 29.261, 'text': "It's a harder topic to kind of understand, but I'll try to simplify it as much as possible.", 'start': 25.038, 'duration': 4.223}, {'end': 33.576, 'text': 'So again, this is a small chapter to kind of get you up and running with it.', 'start': 29.621, 'duration': 3.955}, {'end': 37.46, 'text': "And then in the course, we're going to start building up projects and all of those good stuff.", 'start': 33.977, 'duration': 3.483}, {'end': 39.522, 'text': 'Again, I have like 20 hours filmed.', 'start': 37.92, 'duration': 1.602}, {'end': 40.322, 'text': "It's going to be amazing.", 'start': 39.582, 'duration': 0.74}, {'end': 45.347, 'text': "Next week, I'm going to start sharing like everything that I have in the course, see if you like it and everything.", 'start': 40.663, 'duration': 4.684}, {'end': 46.889, 'text': "And yeah, that's going to be it.", 'start': 45.868, 'duration': 1.021}, {'end': 50.252, 'text': "So enjoy this part and I'll see you in the next one.", 'start': 46.929, 'duration': 3.323}], 'summary': 'Introduction to asynchronous javascript with 20 hours of filmed content, upcoming course release.', 'duration': 27.876, 'max_score': 22.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw22376.jpg'}, {'end': 88.288, 'src': 'embed', 'start': 61.879, 'weight': 2, 'content': [{'end': 67.501, 'text': 'So what is Ajax? Ajax means asynchronous JavaScript and XML.', 'start': 61.879, 'duration': 5.622}, {'end': 71.283, 'text': "What is XML? We don't care because nobody uses XML anymore.", 'start': 67.641, 'duration': 3.642}, {'end': 75.285, 'text': 'But XML is basically a format, a lightweight,', 'start': 71.503, 'duration': 3.782}, {'end': 84.747, 'text': 'easy way Format that people use to kind of send data from server to the browser or from server to another server and things of that sort.', 'start': 75.285, 'duration': 9.462}, {'end': 88.288, 'text': "Okay, but again we're not going to be using XML.", 'start': 84.747, 'duration': 3.541}], 'summary': 'Ajax is a method for asynchronous data exchange, typically not using xml.', 'duration': 26.409, 'max_score': 61.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw61879.jpg'}, {'end': 145.12, 'src': 'embed', 'start': 115.502, 'weight': 1, 'content': [{'end': 116.983, 'text': "We're going to get into that in just a bit.", 'start': 115.502, 'duration': 1.481}, {'end': 119.705, 'text': "Let's just worry about asynchronous JavaScript.", 'start': 117.203, 'duration': 2.502}, {'end': 126.969, 'text': "What is asynchronous JavaScript and why do we use it? So, so far, everything we've been writing mostly was synchronous.", 'start': 120.365, 'duration': 6.604}, {'end': 131.012, 'text': 'So how is asynchronous useful? Well, take a look.', 'start': 127.469, 'duration': 3.543}, {'end': 136.315, 'text': 'The normal behavior of a website is, let me, let me see something here.', 'start': 131.412, 'duration': 4.903}, {'end': 138.756, 'text': "Uh, let's just pull up a page or something.", 'start': 136.335, 'duration': 2.421}, {'end': 143.079, 'text': "I don't know, like let's click here on dribble.", 'start': 139.777, 'duration': 3.302}, {'end': 145.12, 'text': "Let's go to dribble.", 'start': 144.159, 'duration': 0.961}], 'summary': 'Introduction to asynchronous javascript and its usefulness in web development.', 'duration': 29.618, 'max_score': 115.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw115502.jpg'}, {'end': 196.318, 'src': 'embed', 'start': 164.658, 'weight': 3, 'content': [{'end': 166.779, 'text': "It's going to fetch all the information on that page.", 'start': 164.658, 'duration': 2.121}, {'end': 170.481, 'text': "and it's gonna bring it back and it's gonna update everything for us.", 'start': 167.539, 'duration': 2.942}, {'end': 180.207, 'text': 'AJAX allows us to kind of make these requests to get data from a server in the background.', 'start': 171.042, 'duration': 9.165}, {'end': 183.77, 'text': 'And what you get is this kind of live update view.', 'start': 180.648, 'duration': 3.122}, {'end': 191.775, 'text': 'So for example, if I search on YouTube here, if I search tool, as you can see, everything is live updating here.', 'start': 184.21, 'duration': 7.565}, {'end': 196.318, 'text': "All right, and this is some data that's getting back from like some Google servers.", 'start': 192.235, 'duration': 4.083}], 'summary': 'Ajax fetches and updates live data from servers in the background.', 'duration': 31.66, 'max_score': 164.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw164658.jpg'}], 'start': 2.441, 'title': 'Javascript asynchronous basics and ajax for dynamic web updates', 'summary': 'Covers the completion of a 20-hour javascript course, with a focus on asynchronous javascript and its usefulness, as well as understanding ajax for live web content updates, with plans to share portions of the course on youtube next week and real-time data updates on websites like youtube and can i use.', 'chapters': [{'end': 138.756, 'start': 2.441, 'title': 'Javascript asynchronous basics', 'summary': 'Discusses the upcoming completion of a javascript course, with a focus on asynchronous javascript and its usefulness, mentioning a 20-hour filmed content and plans to share portions of the course on youtube next week.', 'duration': 136.315, 'highlights': ['The chapter discusses the upcoming completion of a JavaScript course, with a focus on asynchronous JavaScript and its usefulness, mentioning a 20-hour filmed content and plans to share portions of the course on YouTube next week.', 'The chapter explains the concept of Ajax, asynchronous JavaScript, and XML, and mentions the shift from using XML to JSON for sending data from server to browser or between servers.', 'The chapter introduces the concept of asynchronous JavaScript and its usefulness compared to synchronous JavaScript, highlighting the benefits of asynchronous behavior for websites.']}, {'end': 237.585, 'start': 139.777, 'title': 'Understanding ajax for dynamic web updates', 'summary': 'Discusses the concept of ajax, which enables live updating of web content by making background requests to the server, exemplified by real-time data updates on websites like youtube and can i use.', 'duration': 97.808, 'highlights': ['AJAX allows background requests to the server for live updating of web content, as demonstrated through real-time data updates on websites like YouTube and Can I Use.', 'Real-time data updates on YouTube and Can I Use showcase the effectiveness of AJAX in dynamically updating web content without the need for manual page refresh.', 'AJAX enables dynamic data fetching and updating of HTML, CSS, and JavaScript, providing a seamless user experience on websites like YouTube and Can I Use.']}], 'duration': 235.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw2441.jpg', 'highlights': ['The chapter discusses the upcoming completion of a JavaScript course, with a focus on asynchronous JavaScript and its usefulness, mentioning a 20-hour filmed content and plans to share portions of the course on YouTube next week.', 'The chapter introduces the concept of asynchronous JavaScript and its usefulness compared to synchronous JavaScript, highlighting the benefits of asynchronous behavior for websites.', 'The chapter explains the concept of Ajax, asynchronous JavaScript, and XML, and mentions the shift from using XML to JSON for sending data from server to browser or between servers.', 'AJAX allows background requests to the server for live updating of web content, as demonstrated through real-time data updates on websites like YouTube and Can I Use.', 'Real-time data updates on YouTube and Can I Use showcase the effectiveness of AJAX in dynamically updating web content without the need for manual page refresh.', 'AJAX enables dynamic data fetching and updating of HTML, CSS, and JavaScript, providing a seamless user experience on websites like YouTube and Can I Use.']}, {'end': 846.326, 'segs': [{'end': 295.217, 'src': 'embed', 'start': 263.613, 'weight': 2, 'content': [{'end': 265.695, 'text': "Okay, so that's kind of the goal behind it.", 'start': 263.613, 'duration': 2.082}, {'end': 269.219, 'text': "Now let's take a look on how asynchronous code actually looks.", 'start': 265.735, 'duration': 3.484}, {'end': 278.309, 'text': "Okay, so let's quickly just recap on how synchronous code looks in JavaScript.", 'start': 273.444, 'duration': 4.865}, {'end': 280.652, 'text': "All right, and I'm going to show you how asynchronous code looks.", 'start': 278.369, 'duration': 2.283}, {'end': 284.336, 'text': "So let's do a sync, sync code example.", 'start': 280.872, 'duration': 3.464}, {'end': 287.075, 'text': 'All right.', 'start': 286.775, 'duration': 0.3}, {'end': 289.736, 'text': "So let's just do simple, super simple console logs.", 'start': 287.095, 'duration': 2.641}, {'end': 291.336, 'text': 'So this is the start here.', 'start': 289.936, 'duration': 1.4}, {'end': 295.217, 'text': 'Console log and all right.', 'start': 292.376, 'duration': 2.841}], 'summary': 'Comparing synchronous and asynchronous code in javascript.', 'duration': 31.604, 'max_score': 263.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw263613.jpg'}, {'end': 374.901, 'src': 'embed', 'start': 328.521, 'weight': 0, 'content': [{'end': 333.045, 'text': 'again JavaScript is gonna read your code line by line.', 'start': 328.521, 'duration': 4.524}, {'end': 333.265, 'text': 'all right?', 'start': 333.045, 'duration': 0.22}, {'end': 337.849, 'text': 'JavaScript is pretty bad at reading code, so it can only do it one line at a time.', 'start': 333.545, 'duration': 4.304}, {'end': 340.05, 'text': 'So it goes from here to here.', 'start': 338.349, 'duration': 1.701}, {'end': 340.29, 'text': 'all right?', 'start': 340.05, 'duration': 0.24}, {'end': 347.136, 'text': 'It checks this function, it adds it to the memory, then it console.log start and when we invoke a function, if you remember,', 'start': 340.37, 'duration': 6.766}, {'end': 351.38, 'text': 'We basically create a new execution context.', 'start': 348.337, 'duration': 3.043}, {'end': 355.644, 'text': 'So when we invoke a function, we go inside the function.', 'start': 351.94, 'duration': 3.704}, {'end': 357.105, 'text': 'So we start reading this function.', 'start': 355.684, 'duration': 1.421}, {'end': 360.949, 'text': 'We start reading not this function, this console log and this thing.', 'start': 357.245, 'duration': 3.704}, {'end': 367.916, 'text': "And finally, when we're done with the function, it closes, right? It gets popped off of that call stack that we talked about.", 'start': 361.49, 'duration': 6.426}, {'end': 374.901, 'text': 'and again, the call stack is kind of a way for javascript to keep track of all your execution context.', 'start': 368.957, 'duration': 5.944}], 'summary': 'Javascript reads code line by line, creating new execution contexts when functions are invoked and keeping track using the call stack.', 'duration': 46.38, 'max_score': 328.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw328521.jpg'}, {'end': 532.399, 'src': 'embed', 'start': 501.329, 'weight': 3, 'content': [{'end': 504.753, 'text': "So I'm gonna add setTimeout here, which takes a callback function.", 'start': 501.329, 'duration': 3.424}, {'end': 506.656, 'text': 'just like that.', 'start': 506.055, 'duration': 0.601}, {'end': 509.218, 'text': "I'm going to add the delay of 2000 seconds.", 'start': 507.216, 'duration': 2.002}, {'end': 510.019, 'text': 'All right.', 'start': 509.778, 'duration': 0.241}, {'end': 514.022, 'text': 'So now every code that we write in here is going to be asynchronous.', 'start': 510.439, 'duration': 3.583}, {'end': 515.683, 'text': "So I'm going to console log.", 'start': 514.582, 'duration': 1.101}, {'end': 518.686, 'text': 'We are in the timeout.', 'start': 516.443, 'duration': 2.243}, {'end': 523.09, 'text': "Again, all this thing does is it's going to delay the code in here by two seconds.", 'start': 518.866, 'duration': 4.224}, {'end': 523.851, 'text': 'All right.', 'start': 523.671, 'duration': 0.18}, {'end': 532.399, 'text': "If I hit save and I run this code, how do you think it's going to run? Do we get start? We wait two seconds and then we get end.", 'start': 523.931, 'duration': 8.468}], 'summary': 'Adding a 2-second delay using settimeout for asynchronous execution.', 'duration': 31.07, 'max_score': 501.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw501329.jpg'}, {'end': 663.933, 'src': 'embed', 'start': 630.209, 'weight': 4, 'content': [{'end': 635.657, 'text': "It's a single threaded programming language, so it can only read code line by line.", 'start': 630.209, 'duration': 5.448}, {'end': 641.346, 'text': "But, there's actually something else going on.", 'start': 636.778, 'duration': 4.568}, {'end': 644.967, 'text': "We have the browser, because we're running JavaScript in the browser.", 'start': 641.686, 'duration': 3.281}, {'end': 650.909, 'text': 'So there are these things called web APIs that can handle those things separately for us.', 'start': 645.367, 'duration': 5.542}, {'end': 654.07, 'text': 'So, when we call the setTimeout,', 'start': 651.369, 'duration': 2.701}, {'end': 663.933, 'text': 'JavaScript is basically gonna pass this timeout inside this web APIs and the browser is basically gonna keep track of of the time here.', 'start': 654.07, 'duration': 9.863}], 'summary': 'Javascript is single-threaded and uses web apis, e.g., settimeout, to handle asynchronous tasks in the browser.', 'duration': 33.724, 'max_score': 630.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw630209.jpg'}, {'end': 855.489, 'src': 'embed', 'start': 825.14, 'weight': 5, 'content': [{'end': 826.42, 'text': 'This is not gonna be asynchronous.', 'start': 825.14, 'duration': 1.28}, {'end': 830.521, 'text': 'So if we run this, start one, two, three, four, five and then end, all right?', 'start': 826.84, 'duration': 3.681}, {'end': 835.703, 'text': "So it's gonna loop over this until it finishes before we get down here, okay?", 'start': 830.541, 'duration': 5.162}, {'end': 843.945, 'text': "So I just wanna mention that you're gonna have callback functions, that they're not necessarily.", 'start': 835.983, 'duration': 7.962}, {'end': 845.046, 'text': 'all of them are asynchronous.', 'start': 843.945, 'duration': 1.101}, {'end': 846.326, 'text': 'They can be synchronous too.', 'start': 845.106, 'duration': 1.22}, {'end': 855.489, 'text': "Okay, so let's get into an example on how we can create or kind of like simulate asynchronous code.", 'start': 847.106, 'duration': 8.383}], 'summary': 'Discussion on synchronous and asynchronous callback functions in code execution.', 'duration': 30.349, 'max_score': 825.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw825140.jpg'}], 'start': 237.625, 'title': 'Asynchronous javascript', 'summary': "Delves into javascript's asynchronous and synchronous code, demonstrating the flow and execution of synchronous code, the concept of the call stack, and behavior of asynchronous javascript code, including the settimeout function, use of web apis, and callback functions.", 'chapters': [{'end': 472.984, 'start': 237.625, 'title': 'Javascript asynchronous code', 'summary': 'Explains how javascript processes asynchronous and synchronous code, demonstrating the flow and execution of synchronous code and the concept of the call stack, leading to the understanding of asynchronous code.', 'duration': 235.359, 'highlights': ['JavaScript processes code line by line, adding functions to memory and creating new execution contexts when invoking functions.', 'Explanation of the call stack, illustrating how it keeps track of execution contexts and the removal of functions after execution.', 'Demonstration of synchronous code execution through a simple console log example.']}, {'end': 846.326, 'start': 473.525, 'title': 'Understanding asynchronous javascript', 'summary': 'Explores the behavior of asynchronous javascript code, including the settimeout function, the use of web apis for handling asynchronous tasks, and the concept of callback functions, highlighting the execution flow and the distinction between asynchronous and synchronous callbacks.', 'duration': 372.801, 'highlights': ['The setTimeout function delays the code execution by the specified time, demonstrating asynchronous behavior.', 'Web APIs handle asynchronous tasks, allowing JavaScript to continue running while the asynchronous code is processed separately.', 'The concept of callback functions is introduced, emphasizing that not all callback functions are asynchronous, as demonstrated by the synchronous behavior of the forEach method.']}], 'duration': 608.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw237625.jpg', 'highlights': ['JavaScript processes code line by line, adding functions to memory and creating new execution contexts when invoking functions.', 'Explanation of the call stack, illustrating how it keeps track of execution contexts and the removal of functions after execution.', 'Demonstration of synchronous code execution through a simple console log example.', 'The setTimeout function delays the code execution by the specified time, demonstrating asynchronous behavior.', 'Web APIs handle asynchronous tasks, allowing JavaScript to continue running while the asynchronous code is processed separately.', 'The concept of callback functions is introduced, emphasizing that not all callback functions are asynchronous, as demonstrated by the synchronous behavior of the forEach method.']}, {'end': 1365.457, 'segs': [{'end': 871.579, 'src': 'embed', 'start': 847.106, 'weight': 1, 'content': [{'end': 855.489, 'text': "Okay, so let's get into an example on how we can create or kind of like simulate asynchronous code.", 'start': 847.106, 'duration': 8.383}, {'end': 864.615, 'text': "Okay, and this one let's try to give like kind of simulate an example on how it would be for you to get some data back from a server.", 'start': 857.771, 'duration': 6.844}, {'end': 871.579, 'text': 'Okay, so let me kind of show you a problem that we might have if you try to write code synchronously.', 'start': 865.295, 'duration': 6.284}], 'summary': 'Simulating asynchronous code for server data retrieval.', 'duration': 24.473, 'max_score': 847.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw847106.jpg'}, {'end': 1139.282, 'src': 'heatmap', 'start': 984.145, 'weight': 0.709, 'content': [{'end': 988.309, 'text': 'So if I run this node app, start undefined and finished.', 'start': 984.145, 'duration': 4.164}, {'end': 990.711, 'text': 'So as you can see, user gave us undefined.', 'start': 988.669, 'duration': 2.042}, {'end': 996.636, 'text': 'Why? Again, the information did not come back yet when we console log the user down here.', 'start': 990.811, 'duration': 5.825}, {'end': 998.738, 'text': 'All right, this took too much time.', 'start': 997.076, 'duration': 1.662}, {'end': 1001.761, 'text': 'So if I do something like 5, 000 here, all right, we get.', 'start': 999.499, 'duration': 2.262}, {'end': 1005.043, 'text': 'Start, finish, undefined.', 'start': 1003.622, 'duration': 1.421}, {'end': 1008.564, 'text': 'One, two, three, four, five.', 'start': 1005.463, 'duration': 3.101}, {'end': 1010.945, 'text': 'And this is when the actual information gets back.', 'start': 1008.624, 'duration': 2.321}, {'end': 1015.947, 'text': 'And to see that, I can even add a console log in this set timeouts.', 'start': 1011.005, 'duration': 4.942}, {'end': 1018.628, 'text': 'I can say, now we have the data.', 'start': 1016.007, 'duration': 2.621}, {'end': 1023.049, 'text': 'But when I tried to access it down here, I did not have it.', 'start': 1020.168, 'duration': 2.881}, {'end': 1025.93, 'text': 'So run, start, undefined, finish.', 'start': 1023.87, 'duration': 2.06}, {'end': 1027.29, 'text': "Let's wait a bit.", 'start': 1026.511, 'duration': 0.779}, {'end': 1030.693, 'text': 'and now we have the data all right?', 'start': 1029.011, 'duration': 1.682}, {'end': 1033.435, 'text': 'So how can we get around this issue?', 'start': 1031.154, 'duration': 2.281}, {'end': 1038.842, 'text': "All right, we cannot run synchronous style code here because we don't have the data.", 'start': 1034.017, 'duration': 4.825}, {'end': 1043.261, 'text': 'So what we can do is we can pass in a callback.', 'start': 1039.98, 'duration': 3.281}, {'end': 1046.061, 'text': 'All right, callback functions are super important.', 'start': 1043.461, 'duration': 2.6}, {'end': 1053.644, 'text': "Again, a callback function is just a function that's passed in as a parameter that's gonna run later on in a later time.", 'start': 1046.082, 'duration': 7.562}, {'end': 1058.906, 'text': 'So what we do is we pass in a callback function here.', 'start': 1054.305, 'duration': 4.601}, {'end': 1060.847, 'text': 'All right, this is gonna be a function.', 'start': 1058.926, 'duration': 1.921}, {'end': 1065.71, 'text': 'So now I can add a comma here and invoke that function right?', 'start': 1061.627, 'duration': 4.083}, {'end': 1069.053, 'text': 'So I can pass in a curly brackets and parentheses right?', 'start': 1065.75, 'duration': 3.303}, {'end': 1071.535, 'text': "So this is the function that I'm invoking here.", 'start': 1069.073, 'duration': 2.462}, {'end': 1079.562, 'text': "So now what I say, rather than returning here, what I'm going to do is I'm going to wrap this thing in a callback.", 'start': 1072.296, 'duration': 7.266}, {'end': 1087.849, 'text': "All right, so now I'm passing this user email as a parameter and this function here that I'm calling back.", 'start': 1080.339, 'duration': 7.51}, {'end': 1092.235, 'text': 'So here I will have access to that user.', 'start': 1088.289, 'duration': 3.946}, {'end': 1095.539, 'text': 'All right, then I can do user dot user email.', 'start': 1093.136, 'duration': 2.403}, {'end': 1101.623, 'text': "So here I can say console log user dot just let's just do user.", 'start': 1095.959, 'duration': 5.664}, {'end': 1106.106, 'text': 'Okay So recap, we just pass in a callback function here.', 'start': 1102.064, 'duration': 4.042}, {'end': 1107.066, 'text': 'All right.', 'start': 1106.126, 'duration': 0.94}, {'end': 1107.887, 'text': 'Which is here.', 'start': 1107.246, 'duration': 0.641}, {'end': 1110.108, 'text': 'And once the data come backs.', 'start': 1108.487, 'duration': 1.621}, {'end': 1118.392, 'text': 'So when the set time out here runs, we invoke that callback function, which triggers all of the functionality in here.', 'start': 1110.748, 'duration': 7.644}, {'end': 1121.754, 'text': 'So in here is where we actually have access to the user.', 'start': 1118.832, 'duration': 2.922}, {'end': 1122.874, 'text': "So let's take a look.", 'start': 1122.094, 'duration': 0.78}, {'end': 1125.616, 'text': "Now let's run this node app, start, finish.", 'start': 1122.915, 'duration': 2.701}, {'end': 1136.962, 'text': 'And look at that after five seconds, boom, we have the data and I get the correct data and here user email devlet gmail, blah, blah, blah.', 'start': 1128.14, 'duration': 8.822}, {'end': 1137.962, 'text': 'All right.', 'start': 1137.682, 'duration': 0.28}, {'end': 1139.282, 'text': 'So there we go.', 'start': 1138.742, 'duration': 0.54}], 'summary': 'Using callback functions to handle asynchronous data retrieval, achieving successful data access after a 5-second delay', 'duration': 155.137, 'max_score': 984.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw984145.jpg'}, {'end': 1038.842, 'src': 'embed', 'start': 1008.624, 'weight': 2, 'content': [{'end': 1010.945, 'text': 'And this is when the actual information gets back.', 'start': 1008.624, 'duration': 2.321}, {'end': 1015.947, 'text': 'And to see that, I can even add a console log in this set timeouts.', 'start': 1011.005, 'duration': 4.942}, {'end': 1018.628, 'text': 'I can say, now we have the data.', 'start': 1016.007, 'duration': 2.621}, {'end': 1023.049, 'text': 'But when I tried to access it down here, I did not have it.', 'start': 1020.168, 'duration': 2.881}, {'end': 1025.93, 'text': 'So run, start, undefined, finish.', 'start': 1023.87, 'duration': 2.06}, {'end': 1027.29, 'text': "Let's wait a bit.", 'start': 1026.511, 'duration': 0.779}, {'end': 1030.693, 'text': 'and now we have the data all right?', 'start': 1029.011, 'duration': 1.682}, {'end': 1033.435, 'text': 'So how can we get around this issue?', 'start': 1031.154, 'duration': 2.281}, {'end': 1038.842, 'text': "All right, we cannot run synchronous style code here because we don't have the data.", 'start': 1034.017, 'duration': 4.825}], 'summary': 'Difficulty accessing data due to asynchronous code, requiring a different approach.', 'duration': 30.218, 'max_score': 1008.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1008624.jpg'}, {'end': 1137.962, 'src': 'embed', 'start': 1110.748, 'weight': 0, 'content': [{'end': 1118.392, 'text': 'So when the set time out here runs, we invoke that callback function, which triggers all of the functionality in here.', 'start': 1110.748, 'duration': 7.644}, {'end': 1121.754, 'text': 'So in here is where we actually have access to the user.', 'start': 1118.832, 'duration': 2.922}, {'end': 1122.874, 'text': "So let's take a look.", 'start': 1122.094, 'duration': 0.78}, {'end': 1125.616, 'text': "Now let's run this node app, start, finish.", 'start': 1122.915, 'duration': 2.701}, {'end': 1136.962, 'text': 'And look at that after five seconds, boom, we have the data and I get the correct data and here user email devlet gmail, blah, blah, blah.', 'start': 1128.14, 'duration': 8.822}, {'end': 1137.962, 'text': 'All right.', 'start': 1137.682, 'duration': 0.28}], 'summary': 'Node app retrieves user data in 5 seconds.', 'duration': 27.214, 'max_score': 1110.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1110748.jpg'}, {'end': 1373.162, 'src': 'embed', 'start': 1342.983, 'weight': 3, 'content': [{'end': 1345.725, 'text': "So you're invoking more of these and you get into this weird.", 'start': 1342.983, 'duration': 2.742}, {'end': 1352.989, 'text': 'Look at this like in this weird-ass structure, kind of like a pyramid here or a triangle.', 'start': 1346.705, 'duration': 6.284}, {'end': 1356.812, 'text': 'And this is something that is referred to as callback hell.', 'start': 1353.43, 'duration': 3.382}, {'end': 1357.072, 'text': 'all right?', 'start': 1356.812, 'duration': 0.26}, {'end': 1362.936, 'text': "It's when you keep stacking these things one on top of each other and it's very hard to read, and you don't know.", 'start': 1357.112, 'duration': 5.824}, {'end': 1365.457, 'text': "it's hard to read and you don't know what's going on.", 'start': 1362.936, 'duration': 2.521}, {'end': 1365.737, 'text': 'all right?', 'start': 1365.457, 'duration': 0.28}, {'end': 1373.162, 'text': "So in the next chapters, we're gonna take a look on how we can fix this and make this easier using promises,", 'start': 1366.138, 'duration': 7.024}], 'summary': 'Callback hell makes code hard to read. promises can fix this.', 'duration': 30.179, 'max_score': 1342.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1342983.jpg'}], 'start': 847.106, 'title': 'Asynchronous code challenges', 'summary': 'Discusses challenges of synchronous code in server data retrieval, presenting a specific example involving a 1500ms delay, and explains the concept of callback functions and the issue of callback hell when nesting multiple callbacks, leading to complex code structure.', 'chapters': [{'end': 1033.435, 'start': 847.106, 'title': 'Simulating asynchronous code for server data retrieval', 'summary': 'Demonstrates the challenges of synchronous code in fetching data from a server using a simulated example, showing how data retrieval is affected by timing and the need for asynchronous code, with a specific example involving a 1500ms delay in data retrieval and the resulting undefined output.', 'duration': 186.329, 'highlights': ['The chapter demonstrates the challenges of synchronous code in fetching data from a server using a simulated example', 'Showing how data retrieval is affected by timing and the need for asynchronous code', 'Specific example involving a 1500ms delay in data retrieval', 'Resulting undefined output']}, {'end': 1365.457, 'start': 1034.017, 'title': 'Callback functions and asynchronous code', 'summary': 'Explains the concept of callback functions, demonstrating their use in handling asynchronous code, and highlights the challenge of callback hell when nesting multiple callbacks, leading to a complex and hard-to-read code structure.', 'duration': 331.44, 'highlights': ['Callback functions are demonstrated as a way to handle asynchronous code, showcasing the use of a callback to retrieve user data after a specified time, resulting in the successful retrieval of user information after 5 seconds.', 'The process of utilizing callback functions to fetch user videos is illustrated, with a callback added to retrieve the videos after obtaining the user details, exemplifying the application of callbacks to handle sequential asynchronous operations.', 'The challenge of callback hell is explained, emphasizing the complexity and unreadability that arises when nesting multiple callbacks, leading to a convoluted code structure.']}], 'duration': 518.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw847106.jpg', 'highlights': ['Callback functions handle asynchronous code, retrieving user data after 5 seconds', 'Demonstrates challenges of synchronous code in server data retrieval', 'Specific example: 1500ms delay in data retrieval resulting in undefined output', 'Callback hell complexity when nesting multiple callbacks']}, {'end': 1740.171, 'segs': [{'end': 1463.53, 'src': 'embed', 'start': 1435.28, 'weight': 2, 'content': [{'end': 1441.202, 'text': 'if on failure or something wrong happens here, then we would have to also run some kind of code.', 'start': 1435.28, 'duration': 5.922}, {'end': 1445.744, 'text': 'All right, so this becomes extremely, extremely complex and successful.', 'start': 1441.682, 'duration': 4.062}, {'end': 1454.947, 'text': 'So what that means is down here, besides running this arrow function, we would have to run another callback function to kind of handle the error too.', 'start': 1446.004, 'duration': 8.943}, {'end': 1458.409, 'text': 'All right, so this becomes super, super complicated here.', 'start': 1455.668, 'duration': 2.741}, {'end': 1463.53, 'text': "So let's take a look at promises, which kind of simplifies everything for us.", 'start': 1459.329, 'duration': 4.201}], 'summary': 'Using promises simplifies handling errors and complex code.', 'duration': 28.25, 'max_score': 1435.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1435280.jpg'}, {'end': 1502.621, 'src': 'embed', 'start': 1477.653, 'weight': 0, 'content': [{'end': 1488.697, 'text': 'A promise is just an object that basically gives us back either a result of an asynchronous operation or a failure of a asynchronous operation kind of like this,', 'start': 1477.653, 'duration': 11.044}, {'end': 1490.857, 'text': 'kind of like what we did here, very, very similar.', 'start': 1488.697, 'duration': 2.16}, {'end': 1498.7, 'text': "So what we're gonna do is let's just create a promise right now, all right? I'm just gonna call this promise.", 'start': 1491.317, 'duration': 7.383}, {'end': 1502.621, 'text': 'all right and set this equal to a new promise.', 'start': 1499.52, 'duration': 3.101}], 'summary': 'Creating a promise for asynchronous operations.', 'duration': 24.968, 'max_score': 1477.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1477653.jpg'}, {'end': 1554.21, 'src': 'embed', 'start': 1523.653, 'weight': 1, 'content': [{'end': 1527.716, 'text': 'So the two keywords here that a promise uses is resolve.', 'start': 1523.653, 'duration': 4.063}, {'end': 1533.561, 'text': "So that's kind of like successful and reject if we have a problem.", 'start': 1527.816, 'duration': 5.745}, {'end': 1534.141, 'text': 'All right.', 'start': 1533.861, 'duration': 0.28}, {'end': 1535.903, 'text': 'So run a arrow function here.', 'start': 1534.181, 'duration': 1.722}, {'end': 1539.385, 'text': "And now again, I'm going to kind of simulate.", 'start': 1536.703, 'duration': 2.682}, {'end': 1542.988, 'text': "I'm going to add a set time out here to kind of simulate.", 'start': 1539.485, 'duration': 3.503}, {'end': 1547.241, 'text': 'getting some data back from an API or something.', 'start': 1544.537, 'duration': 2.704}, {'end': 1548.703, 'text': "Let's do two seconds.", 'start': 1547.261, 'duration': 1.442}, {'end': 1554.21, 'text': 'So here, what you would do is if you successfully got the data back, you would run resolve.', 'start': 1549.404, 'duration': 4.806}], 'summary': 'Understanding promises: resolve for success, reject for problem', 'duration': 30.557, 'max_score': 1523.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1523653.jpg'}], 'start': 1365.457, 'title': 'Async code and promises', 'summary': "Explains asynchronous code complexity, introduces promises for simpler handling, and provides examples of resolving, rejecting, and chaining 'then' and 'catch' methods.", 'chapters': [{'end': 1740.171, 'start': 1365.457, 'title': 'Async code and promises', 'summary': "Explains how asynchronous code works and the complexity it introduces, then introduces promises as objects that simplify handling asynchronous operations by providing a cleaner and easier-to-read syntax, with examples of resolving and rejecting promises and chaining 'then' and 'catch' methods.", 'duration': 374.714, 'highlights': ['Promises are objects that simplify handling asynchronous operations', "Chaining 'then' and 'catch' methods with promises", 'Complexity of handling asynchronous code with callbacks']}], 'duration': 374.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1365457.jpg', 'highlights': ['Promises are objects that simplify handling asynchronous operations', "Chaining 'then' and 'catch' methods with promises", 'Complexity of handling asynchronous code with callbacks']}, {'end': 2528.25, 'segs': [{'end': 1788.582, 'src': 'embed', 'start': 1740.231, 'weight': 2, 'content': [{'end': 1742.912, 'text': 'And after we get the videos, get the video details.', 'start': 1740.231, 'duration': 2.681}, {'end': 1747.335, 'text': "So we're going to refactor this whole code to use this promise syntax.", 'start': 1743.252, 'duration': 4.083}, {'end': 1749.396, 'text': "Okay So let's do that in the next one.", 'start': 1747.675, 'duration': 1.721}, {'end': 1756.186, 'text': "Okay, let's go back to this original example and see how we can refactor this code because it looks nasty.", 'start': 1750.845, 'duration': 5.341}, {'end': 1761.207, 'text': 'So refactor this whole thing and make it look nice with promises.', 'start': 1756.706, 'duration': 4.501}, {'end': 1764.948, 'text': "So let's comment everything out here like that.", 'start': 1761.947, 'duration': 3.001}, {'end': 1770.369, 'text': 'So what we would do is, rather than doing this callback thing here, just get rid of it all right?', 'start': 1765.328, 'duration': 5.041}, {'end': 1773.37, 'text': 'Down here as well, just get rid of all these ugly callbacks.', 'start': 1770.409, 'duration': 2.961}, {'end': 1774.01, 'text': 'Nobody likes them.', 'start': 1773.41, 'duration': 0.6}, {'end': 1779.072, 'text': 'Okay, now what we do is we return a promise.', 'start': 1774.59, 'duration': 4.482}, {'end': 1783.677, 'text': "So let's return here a new promise like that.", 'start': 1779.433, 'duration': 4.244}, {'end': 1787.021, 'text': 'And again, if you remember, we have access to resolve and reject.', 'start': 1784.098, 'duration': 2.923}, {'end': 1788.582, 'text': "So let's run this.", 'start': 1787.541, 'duration': 1.041}], 'summary': 'Refactor code to use promise syntax, eliminating ugly callbacks.', 'duration': 48.351, 'max_score': 1740.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1740231.jpg'}, {'end': 1923.125, 'src': 'heatmap', 'start': 1868.883, 'weight': 0.704, 'content': [{'end': 1874.488, 'text': "And if it returns a promise and you're going to find that in a lot of cases, when you make requests to an API or something,", 'start': 1868.883, 'duration': 5.605}, {'end': 1877.731, 'text': "you don't even have to write out the promises like this right?", 'start': 1874.488, 'duration': 3.243}, {'end': 1879.292, 'text': 'It just comes back.', 'start': 1878.451, 'duration': 0.841}, {'end': 1881.494, 'text': "It's going to return a promise automatically.", 'start': 1879.572, 'duration': 1.922}, {'end': 1883.636, 'text': "So you don't even have to write this out.", 'start': 1881.534, 'duration': 2.102}, {'end': 1886.679, 'text': "Again, here we're consuming it.", 'start': 1885.217, 'duration': 1.462}, {'end': 1890.183, 'text': 'So all we do since this returns a promise is we just add a dot then.', 'start': 1886.759, 'duration': 3.424}, {'end': 1892.745, 'text': "So I'm going to just hit enter and go down to a new line.", 'start': 1890.303, 'duration': 2.442}, {'end': 1894.828, 'text': 'And here we have access to the user.', 'start': 1893.106, 'duration': 1.722}, {'end': 1898.936, 'text': 'All right, user here, and I have access to it.', 'start': 1896.434, 'duration': 2.502}, {'end': 1902.418, 'text': "I can console log out the user and it's gonna work just fine.", 'start': 1898.996, 'duration': 3.422}, {'end': 1908.202, 'text': 'But what if I wanna do kind of what we did here when as soon as I got the user, I also wanna get the video details.', 'start': 1902.859, 'duration': 5.343}, {'end': 1914.467, 'text': 'So I just get user videos here, user videos like that.', 'start': 1908.683, 'duration': 5.784}, {'end': 1917.209, 'text': 'And I can pass in the user.email from here.', 'start': 1914.947, 'duration': 2.262}, {'end': 1919.35, 'text': 'And again, this returns me a promise.', 'start': 1917.949, 'duration': 1.401}, {'end': 1920.591, 'text': 'So I can just add another .', 'start': 1919.43, 'duration': 1.161}, {'end': 1923.125, 'text': 'then I get the videos.', 'start': 1920.591, 'duration': 2.534}], 'summary': 'Consuming api responses as promises, accessing user data and video details.', 'duration': 54.242, 'max_score': 1868.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1868883.jpg'}, {'end': 1908.202, 'src': 'embed', 'start': 1879.572, 'weight': 4, 'content': [{'end': 1881.494, 'text': "It's going to return a promise automatically.", 'start': 1879.572, 'duration': 1.922}, {'end': 1883.636, 'text': "So you don't even have to write this out.", 'start': 1881.534, 'duration': 2.102}, {'end': 1886.679, 'text': "Again, here we're consuming it.", 'start': 1885.217, 'duration': 1.462}, {'end': 1890.183, 'text': 'So all we do since this returns a promise is we just add a dot then.', 'start': 1886.759, 'duration': 3.424}, {'end': 1892.745, 'text': "So I'm going to just hit enter and go down to a new line.", 'start': 1890.303, 'duration': 2.442}, {'end': 1894.828, 'text': 'And here we have access to the user.', 'start': 1893.106, 'duration': 1.722}, {'end': 1898.936, 'text': 'All right, user here, and I have access to it.', 'start': 1896.434, 'duration': 2.502}, {'end': 1902.418, 'text': "I can console log out the user and it's gonna work just fine.", 'start': 1898.996, 'duration': 3.422}, {'end': 1908.202, 'text': 'But what if I wanna do kind of what we did here when as soon as I got the user, I also wanna get the video details.', 'start': 1902.859, 'duration': 5.343}], 'summary': 'The transcript discusses automatic promise return and accessing user data.', 'duration': 28.63, 'max_score': 1879.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1879572.jpg'}, {'end': 2269.941, 'src': 'embed', 'start': 2232.083, 'weight': 0, 'content': [{'end': 2233.384, 'text': 'Okay, so there we go.', 'start': 2232.083, 'duration': 1.301}, {'end': 2234.724, 'text': 'This is promise.all.', 'start': 2233.524, 'duration': 1.2}, {'end': 2241.146, 'text': "It's meant so you can start executing more asynchronous code at the same time or almost at the same time.", 'start': 2235.184, 'duration': 5.962}, {'end': 2243.967, 'text': 'And yeah, it can be useful in certain cases.', 'start': 2241.987, 'duration': 1.98}, {'end': 2245.448, 'text': "I thought I'd show you this one as well.", 'start': 2244.027, 'duration': 1.421}, {'end': 2249.549, 'text': "Okay, let's take a look at async away.", 'start': 2247.648, 'duration': 1.901}, {'end': 2253.932, 'text': 'This is gonna be the last one, the last theoretical section on the page here,', 'start': 2249.589, 'duration': 4.343}, {'end': 2258.094, 'text': "because after that we're gonna actually start building out some examples and stuff like that.", 'start': 2253.932, 'duration': 4.162}, {'end': 2269.941, 'text': "Okay, so what we're gonna do here is let's get rid of this whole thing and just go back here all right to kind of refactor this whole thing,", 'start': 2258.774, 'duration': 11.167}], 'summary': 'Promise.all and async await enable executing asynchronous code simultaneously, useful in certain cases.', 'duration': 37.858, 'max_score': 2232.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw2232083.jpg'}, {'end': 2480.21, 'src': 'embed', 'start': 2452.229, 'weight': 5, 'content': [{'end': 2457.635, 'text': "Okay, so it's a very nice and simple way of writing asynchronous code that we're gonna be using.", 'start': 2452.229, 'duration': 5.406}, {'end': 2460.096, 'text': "Okay, so that's kind of the general idea.", 'start': 2458.095, 'duration': 2.001}, {'end': 2464.059, 'text': 'Now, how can we do the error handling, like the dot catch and all that stuff?', 'start': 2460.297, 'duration': 3.762}, {'end': 2469.142, 'text': 'Like, how can I make sure, like what happens if I have an error here? Right?', 'start': 2464.159, 'duration': 4.983}, {'end': 2472.865, 'text': 'What you can do is you can wrap this in a try catch.', 'start': 2469.883, 'duration': 2.982}, {'end': 2475.887, 'text': 'So try to run this code like that.', 'start': 2473.265, 'duration': 2.622}, {'end': 2480.21, 'text': "And if you if it doesn't work, then catch the error.", 'start': 2476.928, 'duration': 3.282}], 'summary': 'Introduction to writing asynchronous code with error handling using try-catch.', 'duration': 27.981, 'max_score': 2452.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw2452229.jpg'}], 'start': 1740.231, 'title': 'Refactoring code and async await in javascript', 'summary': 'Covers refactoring code to use promise syntax for improved efficiency, and demonstrates the usage of async await and promise.all for simplifying asynchronous code execution and concurrently running asynchronous tasks, with practical implementation examples.', 'chapters': [{'end': 1927.288, 'start': 1740.231, 'title': 'Refactoring code with promises', 'summary': 'Discusses refactoring code to use promise syntax, eliminating callbacks and making the code more readable and efficient, with examples of returning promises and consuming them using .then method.', 'duration': 187.057, 'highlights': ['The chapter discusses refactoring code to use promise syntax', 'Examples of returning promises and consuming them using .then method', 'Eliminating callbacks and making the code more readable']}, {'end': 2528.25, 'start': 1927.728, 'title': 'Async await and promise.all', 'summary': 'Discusses the usage of async await and promise.all in javascript, showcasing how async await simplifies asynchronous code execution and how promise.all allows running asynchronous tasks concurrently, with demonstration of resolving multiple promises simultaneously and handling errors, preparing for practical implementation.', 'duration': 600.522, 'highlights': ['The chapter demonstrates the usage of async await and promise.all in JavaScript, showcasing how async await simplifies asynchronous code execution.', 'The demonstration of resolving multiple promises simultaneously using promise.all showcases the ability to run asynchronous tasks concurrently.', 'The chapter also covers error handling, emphasizing the usage of try-catch to handle errors in asynchronous code execution.']}], 'duration': 788.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_8gHHBlbziw/pics/_8gHHBlbziw1740231.jpg', 'highlights': ['The chapter demonstrates the usage of async await and promise.all in JavaScript, showcasing how async await simplifies asynchronous code execution.', 'The demonstration of resolving multiple promises simultaneously using promise.all showcases the ability to run asynchronous tasks concurrently.', 'The chapter discusses refactoring code to use promise syntax', 'Eliminating callbacks and making the code more readable', 'Examples of returning promises and consuming them using .then method', 'The chapter also covers error handling, emphasizing the usage of try-catch to handle errors in asynchronous code execution.']}], 'highlights': ['AJAX enables dynamic data fetching and updating of HTML, CSS, and JavaScript, providing a seamless user experience on websites like YouTube and Can I Use.', 'The demonstration of resolving multiple promises simultaneously using promise.all showcases the ability to run asynchronous tasks concurrently.', 'The chapter demonstrates the usage of async await and promise.all in JavaScript, showcasing how async await simplifies asynchronous code execution.', 'Promises are objects that simplify handling asynchronous operations.', 'The chapter discusses the upcoming completion of a JavaScript course, with a focus on asynchronous JavaScript and its usefulness, mentioning a 20-hour filmed content and plans to share portions of the course on YouTube next week.']}