Understanding the Fetch API in JavaScript
I believe the best way to master a concept is to explain it to someone else. I’m a Full Stack Developer navigating the ecosystems of JavaScript and Python, building everything from responsive frontends to robust backends. I use this space to document my learning journey, break down complex topics, and share practical solutions to the bugs I encounter. Let's learn in public together!
The Fetch API provides a modern, efficient, and powerful way to make HTTP requests and process responses in JavaScript. It is a significant improvement over the older XMLHttpRequest method.
What is Fetch API?
The Fetch API offers a JavaScript interface for making HTTP requests and processing the responses.
It is a more powerful and flexible replacement for
XMLHttpRequest.The
fetch()function returns a promise that is fulfilled once a response is available.
A common interview question related to the Fetch API is:
Q: If we make a request through a promise and a 404 error is received, will this error be received in
resolveorreject?A: It will always be received as a response, not as an error. Errors are only encountered when the browser can't make a request.
A
fetch()promise is only rejected when a network error is encountered (e.g., due to a permission issue). HTTP errors like 404 or 304 are considered as a response.
The Event Loop and Fetch API
Understanding the event loop is crucial to grasp how fetch requests are processed:
Tasks done by
fetch()are executed first, and the remaining tasks are handled afterward.Even
setTimeout()tasks come afterfetch()tasks, because it has it's own special queue known as a "Microtask queue" or "high priority queue".Even if the callback functions in both the microtask queue and task queue have the same timing, the microtask queue will be resolved first.
However, if a task in the priority queue takes 6 seconds and a task in the task queue takes 1 second, the task in the task queue will be executed first.
Internal Mechanism of Fetch
- Memory Reservation:
A reserved memory space, referred to as "data," along with two arrays called
onFulfilled[]andonRejection[].The
onFulfilled[]array is linked to theresolvemethod of the promise.The
onRejection[]array is linked to therejectmethod of the promise.These fields are private and cannot be directly accessed or modified.
Handling the Web API or Node Environment:
A network request is sent using resources provided by the browser or Node environment.
Any response received is stored in
onFulfilled[](i.e., resolve).If the request is not sent successfully and no response is received, the error is stored in
onRejection[].Even errors like 404 are stored in
onFulfilled[]as they indicate the request was sent but the resource was not found.
More About Fetch Mechanism
Initially, the value of "data" is empty.
Once the network request is completed, the data is moved to either
onFulfilled[]oronRejection[].The functions inside
onFulfilled[]andonRejection[]are responsible for fulfilling the "data" or reserved memory space.Once the "data" is fulfilled, it is assigned to the variable created by the developer, such as
const response = fetch('url').This response is then available in global memory.
Wrap Up
The Fetch API is a powerful tool for making HTTP requests in JavaScript, providing a more modern and flexible approach compared to XMLHttpRequest. Understanding how it works, especially its error handling and event loop integration, is crucial for effective use in web development.
