Callbacks, Promises, Async Await - JavaScript Fetch API Explained

Overview

Dive into an in-depth tutorial on JavaScript's asynchronous programming concepts and the Fetch API. Explore callbacks, promises, and async/await, understanding their roles in handling asynchronous operations. Learn about the three states of promises and common pitfalls to avoid. Practice with real-world examples, including retrieving user data, fetching jokes, posting data, and working with URL parameters. Gain insights into creating async functions, applying await, and abstracting code into single-responsibility functions. Access additional resources for further learning on MDN Web Docs and Eloquent JavaScript.

Syllabus

Intro
What is a callback function?
What is the problem with callbacks?
JavaScript Promises have 3 states
A promise may not return a value where you expect it to: You need to wait for a promise to resolve
Using thenables with a promise
An easy mistake to make with promises
Creating an async function
Applying await inside the function
Example 1: Retrieving user data
Example 2: Retrieving dad jokes
Example 3: Posting data
Example 4: Retrieving data with URL parameters
Abstract it all into single responsibility functions