Как я могу использовать Promise.all в функции Async / Await, используя try / catch

Question

Я пытаюсь разобраться с обещаниями. Пока мне нравится использовать async / await и блок try / catch, так как он лично для меня читаем.

Однако я застрял на использовании Promise.all в этом.

Вот данные Я использую для практики.

const starWars = [
  'https://swapi.co/api/people/1',
  'https://swapi.co/api/people/2',
  'https://swapi.co/api/people/3',
  'https://swapi.co/api/people/4'
];

У меня такое чувство, что я должен использовать .map() в функции asyn c, однако продолжаю сталкиваться с ошибками.

Так что мой вопрос. Как можно извлечь данные из этих URL-адресов, используя async / await, Promise.all и блок try / catch?

Answer 1

Вы можете создавать обещания для всех URL, используя функцию map, и ждать их с помощью Promise.all

const starWars = [
  'https://swapi.co/api/people/1',
  'https://swapi.co/api/people/2',
  'https://swapi.co/api/people/3',
  'https://swapi.co/api/people/4'
]; 

const promises = starWars.map(url => fetch(url).then(res => res.json());

Promise.all(promises).then(results => /*Resolved code*/)
                     .catch(error => /*Rejected code*/);

Answer 2

Сопоставьте каждый URL с fetch вызовом и позвоните .json на fetch Обещании:

const urls = [
  'https://swapi.co/api/people/1',
  'https://swapi.co/api/people/2',
  'https://swapi.co/api/people/3',
  'https://swapi.co/api/people/4'
];

(async () => {
  try {
    const allResponses = await Promise.all(
      urls.map(url => fetch(url).then(res => res.json()))
    );
    console.log(allResponses[0]);
  } catch(e) {
    console.log(e);
    // handle errors
  }
})();

Я бы предпочел ловить вне функции, я думаю, что она выглядит чище и требует меньше отступов:

const urls = [
  'https://swapi.co/api/people/1',
  'https://swapi.co/api/people/2',
  'https://swapi.co/api/people/3',
  'https://swapi.co/api/people/4'
];

(async () => {
  const allResponses = await Promise.all(
    urls.map(url => fetch(url).then(res => res.json()))
  );
  console.log(allResponses[0]);
  // do stuff with allResponses
})()
  .catch((e) => {
    console.log(e);
    // handle errors
  });

Если у вас есть только одно место, где вам нужно дождаться разрешения Обещания, вы можете также рассмотреть возможность отказа от функции async в целом (это выглядело бы еще лучше ИМО):

const urls = [
  'https://swapi.co/api/people/1',
  'https://swapi.co/api/people/2',
  'https://swapi.co/api/people/3',
  'https://swapi.co/api/people/4'
];

Promise.all(
  urls.map(url => fetch(url).then(res => res.json()))
)
  .then((allResponses) => {
    console.log(allResponses[0]);
    // do stuff with allResponses
  })
  .catch((e) => {
    console.log(e);
    // handle errors
  });

Answer 3

const starWars = [
  'https://swapi.co/api/people/1',
  'https://swapi.co/api/people/2',
  'https://swapi.co/api/people/3',
  'https://swapi.co/api/people/4'
];

async function makeApiCalls() {
  try {
    let res = await Promise.all(starWars.map(endpoint => fetch(endpoint)));
    // depending on content-type apply .json() .blob() etc
    console.log(response);
  } catch (err) {
    console.error(err);
  }
}