Callbacks, Promises, Async Await | JavaScript Fetch API Explained

Learn about Callbacks, Promises, and Async Await as the JavaScript Fetch API is explained in this tutorial. You will also learn about thenables and how async / await replaces them in our JS code. The first 30 minutes covers the concepts. The last 30 minutes gives examples of retrieving data from different APIs with Fetch. ▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT Subscribe ➜ https://bit.ly/3nGHmNn ✅ Quick Concepts outline: Fetch API with Async / Await (0:00) Intro (0:29) What is a callback function? (1:15) What is the problem with callbacks? (3:00) JavaScript Promises have 3 states (5:28) A promise may not return a value where you expect it to: You need to wait for a promise to resolve (6:58) Using thenables with a promise (20:15) An easy mistake to make with promises (24:00) Creating an async function (25:00) Applying await inside the function (33:45) Example 1: Retrieving user data (40:00) Example 2: Retrieving dad jokes (47:00) Example 3: Posting data (49:40) Example 4: Retrieving data with URL parameters (54:55) Abstract it all into single responsibility functions 🤖 APIs used in the examples for this tutorial: • https://jsonplaceholder.typicode.com/ • https://icanhazdadjoke.com/ • https://httpbin.org/ • http://www.icndb.com/api/ 📚 Further Reading: MDN Web Docs: Using Fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Making asynchronous programming easier with async and await: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await The Promise Object: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Thenables: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then Eloquent JavaScript, Chapter 11: https://eloquentjavascript.net/11_async.html ✅ Follow Me: Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Hashnode: https://yesdavidgray.hashnode.dev/ Reddit: https://www.reddit.com/user/DaveOnEleven Was this tutorial about the JavaScript Fetch API, Async/Await, Promises, Thenables, and Callbacks helpful? If so, please share. Let me know your thoughts in the comments. #async #await #fetch