Understanding the Fetch API in JavaScript

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 resolve or reject?

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 after fetch() 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

1. Memory Reservation:

• A reserved memory space, referred to as "data," along with two arrays called onFulfilled[] and onRejection[].

• The onFulfilled[] array is linked to the resolve method of the promise.

• The onRejection[] array is linked to the reject method of the promise.

• These fields are private and cannot be directly accessed or modified.

2. 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[] or onRejection[].

• The functions inside onFulfilled[] and onRejection[] 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.