Why do you need to await twice with JavaScript fetch?

You need to await the fetch call to get the response headers, and then await again for response.json() to resolve, which retrieves the full response body.

What does response.json() return?

response.json() returns a promise, which is why it requires awaiting.

Why does JSON.parse not need an await?

JSON.parse is synchronous and doesn't require await, unlike response.json() which is asynchronous.

What allows fetch to resolve before the response body is available?

Fetch resolves initially after receiving the response headers from the server, while the body can be processed asynchronously.

Why might a response body take a long time to be available?

The response body can take longer due to network latency or large data size being transferred.

Why does JavaScript's fetch make me wait TWICE?

00:06:23

https://www.youtube.com/watch?v=Ki64Cnyf_cA

概要

TLDRThis video explains the underlying reason why JavaScript's fetch method requires two await calls: one to wait for the response headers, and another for the response.json() to acquire the body content. The fetch method captures the headers as soon as they are received, allowing it to resolve early. However, the response.json() method must be awaited because it returns a promise; the body could take significant time to fully arrive, especially if a large amount of data is being transferred. An explanation of the process is demonstrated with a Node.js server that sends data slowly over the network to show the waiting process in real-time. The presenter also demonstrates how to access the response body more quickly at the byte level with JavaScript's text decoder, allowing for streaming data processing as it arrives, exemplifying a more efficient way of handling asynchronous data.

収穫

🕒 JavaScript fetch involves two awaits: first for headers, then for the body.
📜 response.json() method returns a promise; hence, it requires awaiting.
🔄 JSON.parse is synchronous, unlike response.json which is asynchronous.
🌐 Fetch resolves after receiving response headers before the body.
⏳ Response body arrival time can vary with network conditions and size.
📡 Different approach: stream data with TextDecoder for real-time processing.
📥 Data streamed byte by byte can be appended to the DOM immediately.
🔧 Demonstration includes a simple Node.js server sending data slowly to illustrate the process.
🌈 Example video features a custom web app with a gradient for visual demonstration.
💻 The explanation includes a practical coding illustration on how await functions in fetch.

タイムライン

00:00:00 - 00:06:23
The speaker is discussing the use of 'fetch' in JavaScript and why it requires two 'await' statements. They explain that when you call 'fetch', you initially await the response. After that, you must await the JSON parsing, as 'response.json()' returns a promise. The speaker questions why this is the case, given that 'json.parse()' is synchronous. They explore this by looking at how HTTP messages work, where a response first returns headers and then the body, which may take longer to arrive. They illustrate this using a simple Node.js app that sends data one byte at a time, demonstrating the difference in timing between receiving headers and the body. Lastly, they show how to handle data as it comes in using a text decoder and a for-await loop in the browser.

マインドマップ

よくある質問

Why do you need to await twice with JavaScript fetch?
You need to await the fetch call to get the response headers, and then await again for response.json() to resolve, which retrieves the full response body.
What does response.json() return?
response.json() returns a promise, which is why it requires awaiting.
Why does JSON.parse not need an await?
JSON.parse is synchronous and doesn't require await, unlike response.json() which is asynchronous.
What allows fetch to resolve before the response body is available?
Fetch resolves initially after receiving the response headers from the server, while the body can be processed asynchronously.
Why might a response body take a long time to be available?
The response body can take longer due to network latency or large data size being transferred.