What could be going wrong in this fetch?

Question

I tried this solution to fetch data from multiple APIs with async await but the output is undefined, what could be going wrong?

const getData = async (jwt) => {
  try {
    const [response1, response2, response3] = await Promise.all(
      [
        fetch("http://localhost:3000/api/confirmed"),
        fetch("http://localhost:3000/api/deaths"),
        fetch("http://localhost:3000/api/recovered"),
      ],
      {
        method: "GET",
        headers: {
          "user-agent": "vscode-restclient",
          "content-type": "application/json",
          accept: "application/json",
          authorization:
            "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6IkxlYW5uZSBHcmFoYW0iLCJ1c2VybmFtZSI6IkJyZXQiLCJpYXQiOjE1OTY1MDY4OTN9.KDSlP9ALDLvyy0Jfz52x8NePUejWOV_mZS6cq4-JZXs",
        },
      }
    );
    const { data1 } = await response1.json();
    const { data2 } = await response2.json();
    const { data3 } = await response3.json();
    console.log(data1, data2, data3);
  } catch (err) {
    console.error(`Error: ${err}`);
  }
};

getData();

The syntax of [`Promise.all`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) and [`fetch`](//developer.mozilla.org/docs/Web/API/fetch) is documented. Why did you expect this changed syntax to work? — Sebastian Simon, Mar 05 '22 at 19:47
Even if `Promise.all` would pass parameters to each thing in its first array, the function call is already over and done with `fetch("http://localhost:3000/api/confirmed")`, and no options array got passed here, and can't be passed retroactively either. — deceze, Mar 05 '22 at 19:47

score 2 · Accepted Answer · answered Mar 05 '22 at 19:45

Promise.all only accepts a single parameter, an array of promises. Your second parameter (the object with method and headers) is therefore simply ignored. That obect needs to be passed as a second parameter to the fetch function, not to Promise.all.

Try the following:

const getData = async (jwt) => {
  try {
    const fetchOptions = {
      method: "GET",
      headers: {
        "user-agent": "vscode-restclient",
        "content-type": "application/json",
        accept: "application/json",
        authorization:
          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6IkxlYW5uZSBHcmFoYW0iLCJ1c2VybmFtZSI6IkJyZXQiLCJpYXQiOjE1OTY1MDY4OTN9.KDSlP9ALDLvyy0Jfz52x8NePUejWOV_mZS6cq4-JZXs",
      },
    };
    const [response1, response2, response3] = await Promise.all(
      [
        fetch("http://localhost:3000/api/confirmed", fetchOptions),
        fetch("http://localhost:3000/api/deaths", fetchOptions),
        fetch("http://localhost:3000/api/recovered", fetchOptions),
      ],
    );
    const { data1 } = await response1.json();
    const { data2 } = await response2.json();
    const { data3 } = await response3.json();
    console.log(data1, data2, data3);
  } catch (err) {
    console.error(`Error: ${err}`);
  }
};

getData();

What could be going wrong in this fetch?

1 Answers1