Asynchronous programming introduces new concepts:
Many beginner mistakes happen because asynchronous code does not always execute in the order you expect.
This chapter describes some of the most common mistakes and how to avoid them.
Mistake 1: Forgetting await
The fetch() method returns a Promise.
If you forget await, you get the Promise instead of the downloaded data.
Wrong
const response = fetch("demo.txt");
Correct
const response = await fetch("demo.txt");
2: Using await Outside an Async Function
The await keyword can only be used inside an async function or at the top level of a JavaScript module.
Wrong
function load() {
let response = await fetch("demo.txt");
}
Correct
async function load() {
let response = await fetch("demo.txt");
}
3: Assuming fetch() Fails on HTTP Errors
The Promise returned by fetch() is fulfilled when the server responds.
An HTTP error such as 404 Not Found does not reject the Promise.
Always check response.ok.
Correct
const response = await fetch("demo.txt");
if (!response.ok) {
throw new Error(response.status);
}
4: Thinking Callbacks Are Asynchronous
A callback is simply a function passed to another function.
A callback may be called immediately or later.
The callback itself does not make code asynchronous.
Synchronous
numbers.forEach(show);
Asynchronous
setTimeout(show,1000);
Note: The asynchronous behavior comes from setTimeout(), not from the callback.
5: Blocking the Event Loop
Long-running JavaScript blocks timers, user events, and screen updates.
Example
function wait() {
let i = 4e9;
while(--i > 0);
}
6: Expecting Screen Updates Immediately
Changing the DOM does not always update the screen immediately.
The browser usually waits until the current JavaScript task has finished before repainting the page.
Example
myDisplayer("Start");
wait();
myDisplayer("Done");
Note: Did you know? Changing an element with
innerHTMLupdates the DOM immediately, but the browser normally waits until the current JavaScript task has finished before repainting the screen. This is why long-running JavaScript can make a page appear frozen even though the DOM has already changed.
7: Running Independent Tasks One After Another
If operations are independent, start them together.
Wrong
await fetch("a.json");
await fetch("b.json");
await fetch("c.json");
Correct
await Promise.all([
fetch("a.json"),
fetch("b.json"),
fetch("c.json")
]);
8: Using await Inside forEach()
The forEach() method does not wait for asynchronous callbacks.
Wrong
files.forEach(async function(file){
await upload(file);
});
Correct
for (const file of files) {
await upload(file);
}
9: Forgetting Error Handling
Promises can be rejected.
Always handle possible errors.
Correct
try {
const response = await fetch(url);
}
catch(err) {
console.log(err);
}
10: Thinking setTimeout(..., 0) Runs Immediately
A zero-millisecond timeout means "run as soon as possible."
The callback still waits until the current JavaScript task has finished.
Example
console.log("A");
setTimeout(() => console.log("B"),0);
console.log("C");
Checklist
Before writing asynchronous code, ask yourself:
- Did I forget
await? - Did I check
response.ok? - Can these tasks run in parallel?
- Could this block the Event Loop?
- Am I handling rejected Promises?
- Do I really need a callback?
Summary
- Understand what your asynchronous API returns.
- Remember that
fetch()returns a Promise. - Use
awaitcorrectly. - Check for HTTP errors.
- Do not block the Event Loop.
- Run independent tasks in parallel.
- Always handle errors.
Note: Next Chapter The next page shows how to debug async code like a professional. You will learn breakpoints, logging patterns, and why async errors feel invisible.
