Common Asynchronous Mistakes
Asynchronous programming introduces new concepts:
- Callbacks
- Promises
- async/await
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.
1: Forgetting await
The fetch() method returns a Promise.
If you forget await, you get the Promise instead of the downloaded data.
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.
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);
}
Try it Yourself »
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.
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.
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.
Did you know?
Changing an element with innerHTML updates 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.
8: Using await Inside forEach()
The forEach() method does not wait for asynchronous callbacks.
9: Forgetting Error Handling
Promises can be rejected.
Always handle possible errors.
Correct
try {
const response = await fetch(url);
}
catch(err) {
console.log(err);
}
Try it Yourself »
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.
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.
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.
