Having difficult understanding this promise + async await example to retrieve multiple users info in JavaScript

Question

was following this tutorial(https://javascript.info/fetch) on javascript's promise and async await and had trouble understanding the exercise it provided.

The question is about retrieving multiple users info from Github. One fetch request per user. And requests shouldn’t wait for each other. So that the data arrives as soon as possible.

The solution it provided is

async function getUsers(names) {
  let jobs = [];

  for(let name of names) {
    let job = fetch(`https://api.github.com/users/${name}`).then(
      successResponse => {
        if (successResponse.status != 200) {
          return null;
        } else {
          return successResponse.json();
        }
      },
      failResponse => {
        return null;
      }
    );
    jobs.push(job);
  }

  let results = await Promise.all(jobs);

  return results;
}

My first question is, can we use await for the fetch. i.e. is the following snippet equivalent to the solution he provided?

async function getUsers2(names) {
  let jobs = [];

  for(let name of names) {
    let response
    try {
      response = await fetch(`https://api.github.com/users/${name}`);
    } catch(e) {
      response = null
    }
    const job = response && response.json()
    jobs.push(job);
  }

  let results = await Promise.all(jobs);

  return results;
} 

Furthermore, the tutorial said

.then call is attached directly to fetch, so that when we have the response, it doesn’t wait for other fetches, but starts to read .json() immediately.

If we used await Promise.all(names.map(name => fetch(...))), and call .json() on the results, then it would wait for all fetches to respond. By adding .json() directly to each fetch, we ensure that individual fetches start reading data as JSON without waiting for each other.

Does he mean that if we write the solution this way

async function getUser(name) {
  const response = await fetch(`https://api.github.com/users/${name}`)

  return response.ok ? await response.json : null
}

async function getUsers(names) {
  return await Promise.all(names.map(name => getUser(name)))
}

we wouldn't be able to achieve the effect such that we don't want requests shouldn’t wait for each other?

Answer 1

My first question is, can we use await for the fetch. i.e. is the following snippet equivalent to the solution he provided?

No. When in the immediate body of an async function, whenever there's an await, the function will completely pause until the following Promise resolves. So, the loop

  for(let name of names) {
    let response
    try {
      response = await fetch(`https://api.github.com/users/${name}`);
    } catch(e) {
      response = null
    }

needs to wait in serial for the headers of each response to be received before continuing on to initialize the next request.

Does he mean that if we write the solution this way

First, the syntax needs to be adjusted: .json is a method, so it needs to be called:

async function getUser(name) {
  const response = await fetch(`https://api.github.com/users/${name}`)
  return response.ok ? await response.json() : null
  //                                      ^^
}

But that's perfectly fine to do. The only await in the getUsers function is waiting for the whole Promise.all to resolve; the .mapping of the array to the getUser call is carried out synchronously, so all requests get sent out at once, so none of the network requests need to wait for any of the others to finish in order to work.

The problem the author was referring to was calling Promise.all on an array of the fetch calls, rather than on an array of the .json() calls:

// Bad, do not use:
const getUsers = async (names) => {
  const responses = await Promise.all(names.map(
    name => fetch(`https://api.github.com/users/${name}`)
  ));
  return Promise.all(responses.map(
    response => response.ok ? response.json() : null
  ));
}

The problem with the above is that the script must wait for all of the response headers from every request to be received before the response body for any of them can start to be parsed.

Another parallel solution:

const getUsers = names => Promise.all(names.map(
  async (name) => {
    const res = await fetch(`https://api.github.com/users/${name}`);
    return res.ok ? res.json() : null;
  }
));