Asynchronous Programming
JavaScript normally runs one statement at a time.
Each statement must finish before the next statement can run.
If a task takes a long time, it can block the page and make the browser feel frozen.
Asynchronous programming lets JavaScript start a long-running task and continue running other code while waiting for the result.
Asynchronous Study Path
Learn Asynchronous JavaScript in the Right Order:
Step 1
Async Programming
JavaScript executes code one line at a time. Each line must finish before the next line can run.
Asynchronous is how JavaScript can allow some code to run in the background, and let their results be handled when they are ready.
Step 2
Async Timeouts
The setTimeout() method schedules a function to run after a delay in milliseconds.
It is an asynchrounus operation used to delay code execution without freezing the browser.
Step 3
Async Callbacks
A callback is a function passed to another function.
Callbacks can be synchronous or asynchronous.
In asynchronous JavaScript, callbacks are often used to handle results that are ready later.
Note
A callback is not asynchronous by itself.
A callback is simply a function passed to another function.
Callbacks become part of asynchronous programming when they are used by asynchronous APIs, like setTimeout(), events, or fetch().
Step 4
Async Promises
JavaScript Promises were created to make asynchronous JavaScript easier to use.
A Promise object represents the completion or failure of an asynchronous operation.
A Promise can be in one of three exclusive states: pending, rejected or fulfilled.
Step 5
Async Await
The async and await keywords make Promise-based code easier to read.
Behind the scenes, async and await still use Promises.
The async keyword before a function makes the function return a promise.
This is true even if you return a normal value.
If the function returns a value, JavaScript automatically wraps that value in a Promise.
Step 6
Async Parallel
An await statement waits for one Promise before continuing.
If several asynchronous operations do not depend on each other, waiting for them one by one may be slower than necessary.
Instead, you can start all the operations at the same time and wait for them together.
Step 7
Async Fetch
Modern apps use async code to get data.
fetch() is the modern way to request data from a server.
fetch() is asynchronous and returns a promise.
Step 8
Async Debugging
Asynchronous bugs are difficult because the code runs later.
This chapter shows practical ways to debug fetch(), promises, async and await.
