使用fetch和await打印简单文本。 为什么在异步函数中需要多个等待？

Question

I'm trying to do webcrawling using fetch on React Native. This is what I'm doing:

  const response = fetch(
        url,
        {
            body          : post_data ? post_data : undefined, // must match 'Content-Type' header
            cache         : 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            headers       : headers,
            method        : post_data ? 'POST' : 'GET', // *GET, POST, PUT, DELETE, etc.
            redirect      : redirect ? 'follow' : 'manual', // *manual, follow, error. TODO: is manual the right keyword?
            referrer      : 'no-referrer', // *client, no-referrer
        }
    );

    const http   = await response;
    const header = http.headers;
    const html   = http.text();

    console.log(html);

When I print header , I can see the headers. When I print html , this is what I see:

{ _40: 0, _65: 0, _55: null, _72: null }

What am I possibly doing wrong? I thought one await was necessary, but if I change to:

const http   = await response;
const header = await http.headers;
const html   = await http.text();

console.log(html);

then I can see the HTML. But as I've read, await makes the execution pause and resolves the Promise . So why should I need the two extra awaits below await response?

Answer 1

Getting the response is one promise, while reading it's content is a second promise. That's why you need to await twice.

Equivalent without async/await would be:

   fetch("/url")
    .then((response) => response.text() /* check response status and etc */)
    .then((response) => console.log(response) /* actual response text /*);

Answer 2

Fetch returns a Response object, which is a stream that does not actually contain the response content . You have to call one of the methods to read the stream and return the actual content.

For example:

const response = await fetch( /* your parameters */ );
const responseText = await response.text();

Answer 3

Taking a step back, await accepts a promise as its argument. Looking at the docs for fetch . fetch() returns a promise. response.headers is not a promise. response.text() returns a promise.

Given all of that, await response.headers is not necessary, but your other two are.

As for why response.text() returns a promise, the critical piece is that the response promise resolves as soon as the request starts getting data back, which is before the response data has already been received. This means that await response waits to know "did the server response, and if so with what status code/header , and await response.text()` waits for the actual data that the server sends.