Why does JavaScript's fetch make me wait TWICE?

Summary

This video script delves into the intricacies of JavaScript's fetch function, particularly the necessity of two awaits when retrieving data. It clarifies that fetch returns a promise resolving to a response object upon receiving headers, not the full body. The script uses a Node.js example to illustrate how the body, potentially large, is sent incrementally, affecting the timing of the second await for JSON parsing. It also touches on streaming the response body in real-time, providing insights into asynchronous data handling in web development.

Takeaways

• 😀 The script discusses the use of `fetch` in JavaScript and the necessity of using `await` twice when dealing with asynchronous operations.
• 🔍 It explains that `fetch` returns a promise that resolves to the response object once the server responds with headers.
• 📚 The video clarifies that `JSON.parse()` is a synchronous function, unlike `response.json()`, which is asynchronous and requires `await`.
• 💡 The script highlights that the body of the HTTP message, which `response.json()` retrieves, can take a long time to be fully transmitted, hence the need for `await`.
• 🌐 The video demonstrates that the first `await` gets the headers, and the second `await` is necessary to fully receive the body content.
• 📝 It provides a practical example by creating a simple Node.js server that sends data one byte at a time, illustrating the delay in receiving the full body.
• 🎥 The script uses a live example in a web application to show how the response headers are received quickly, but the body takes time to fully arrive.
• 🛠️ The video shows how to use `response.body.getReader()` and `TextDecoder` to read the body as it streams in, which is useful for large or streaming data.
• 📊 The script includes a visual demonstration of the data streaming in the browser's network tab, showing how the body is received bit by bit.
• 💼 The video concludes with a call to action for supporting the creator's work, hinting at the challenges they face.

Q & A

Why is it necessary to use two awaits when using fetch in JavaScript?

When using fetch in JavaScript, the first await is for the promise that fetch returns, which resolves to the response object once the server responds with headers. The second await is for the promise returned by methods like response.json(), which parse the body of the response, and this parsing is asynchronous because the body might take a long time to be fully received.

Why does response.json() return a promise?

response.json() returns a promise because it is an asynchronous operation that takes time to complete, especially if the body of the response is large. It needs to parse the JSON string into a JavaScript object, and this process is not instantaneous.

What does the fetch method in JavaScript return?

The fetch method in JavaScript returns a promise that resolves to the Response object once the server responds with headers, not the full body of the response.

What is the difference between headers and body in an HTTP message?

In an HTTP message, headers contain metadata about the message, such as content type, status code, and other information, while the body contains the actual data being sent, such as HTML, JSON, or image data.

How does the server in the example send the response body?

In the example, the server sends the response body one byte at a time, every two milliseconds, simulating a slow transmission that can demonstrate the asynchronous nature of fetching the response body.

What happens when the client receives the headers in an HTTP request?

When the client receives the headers in an HTTP request, it knows the request has been accepted by the server and can start processing the response, but it must wait for the body to be fully received, which can take time.

Why might the body of a response take a long time to be received?

The body of a response might take a long time to be received due to various factors such as the size of the data, network latency, or the server's configuration, such as in the example where data is sent one byte at a time.

How can you access the response body as it comes in without waiting for the whole body to be received?

You can access the response body as it comes in by using the Response.body stream and reading it in chunks, which allows you to process the data incrementally without waiting for the entire body to be received.

What is a text decoder and how is it used in the context of streaming response bodies?

A text decoder is used to convert a stream of bytes into a string. In the context of streaming response bodies, it can be used to decode the incoming bytes as text, allowing you to process the response as it is being received.

How can you demonstrate the streaming of a response body in a web application?

You can demonstrate the streaming of a response body in a web application by reading the response body in chunks and appending each chunk to the DOM as it is received, allowing users to see the data as it arrives.