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