Как использовать async-await с Promise.all ()?

Question

В настоящее время я использую этот код ниже, чтобы получить результаты нескольких Обещаний с использованием async await:

let matchday = await createMatchday(2018, 21, [/*9 matches of matchday*/]);
//Further calculations

async function createMatchday(seasonNr, matchdayNr, matches) {
  let md = new Matchday(seasonNr, matchdayNr, matches);
  await md.getStandings(seasonNr, matchdayNr);
  return md;
}

class Matchday {
  constructor(seasonNr, matchdayNr, matches) {
    this.seasonNr = seasonNr;
    this.matchdayNr = matchdayNr;
    this.matches = matches;
  }

  async getStandings(seasonNr, matchdayNr) {
    let promiseArr = [];
    promiseArr.push(makeHttpRequestTo(`http://externService.com/standings?seasonNr=${seasonNr}&matchdayNr=${matchdayNr}`);
    promiseArr.push(makeHttpRequestTo(`http://externService.com/homestandings?seasonNr=${seasonNr}&matchdayNr=${matchdayNr}`));
    promiseArr.push(makeHttpRequestTo(`http://externService.com/awaystandings?seasonNr=${seasonNr}&matchdayNr=${matchdayNr}`));
    promiseArr.push(makeHttpRequestTo(`http://externService.com/formstandings?seasonNr=${seasonNr}&matchdayNr=${matchdayNr}`));

    let resulArr = await Promise.all(promiseArr);
    this.standings = resultArr[0];
    this.homeStandings = resultArr[1];
    this.awayStandings = resultArr[2];
    this.formStandings = resultArr[3];
  }
}

function makeHttpRequest(url) {
  return new Promise((resolve, reject) => {
    //AJAX httpRequest to url
    resolve(httpRequest.responseText);
  }
}

Действительно ли это лучший способ прочитать значения нескольких обещаний, где обещания не выполняются?Не нужно ждать окончания друг друга, а работать одновременно, используя Promise.all (), или есть лучший способ сделать, например, несколько запросов httpRequest одновременно, потому что это кажется довольно повторяющимся?

Answer 1

Чтобы ответить, нет, вы не должны блокировать другие XHR или любые запросы ввода-вывода, которые не зависят друг от друга.Я бы написал вашу функцию так:

const getFavourites = async () => {
  try {
    const result = await Promise.resolve("Pizza");
    console.log("Favourite food: " + result);
  } catch (error) {
    console.log('error getting food');
  }
  try {
    const result = await Promise.resolve("Monkey");
    console.log("Favourite animal: " + result);
  } catch (error) {
    console.log('error getting animal');
  }
  try {
    const result = await Promise.resolve("Green");
    console.log("Favourite color: " + result);
  } catch (error) {
    console.log('error getting color');
  }
  try {
    const result = await Promise.resolve("Water");
    console.log("Favourite liquid: " + result);
  } catch (error) {
    console.log('error getting liquid');
  }
}

getFavourites();

Таким образом, все асинхронные функции будут вызываться одновременно, и никакое асинхронное действие не будет блокировать другое действие.

Answer 2

Все ваши URL-адреса следуют одному и тому же шаблону, поэтому вы можете значительно сократить свой код, map отправив массив ['', 'home', 'away', 'form'] на URL-адреса.Затем map эти URL-адреса для Promises через makeHttpRequestTo, а затем вы можете разбить ожидаемые результаты на свойства this.:

async getStandings(seasonNr, matchdayNr) {
  const urls = ['', 'home', 'away', 'form']
    .map(str => `http://externService.com/${str}standings?seasonNr=${seasonNr}&matchdayNr=${matchdayNr}`);
  const promiseArr = urls.map(makeHttpRequestTo);
  [
    this.standings,
    this.homeStandings,
    this.awayStandings,
    this.formStandings
  ] = await Promise.all(promiseArr);
}

Чтобы заполнить каждое свойство по отдельности, а не ждать всех ответов навернись:

async getStandings(seasonNr, matchdayNr) {
  ['', 'home', 'away', 'form']
    .forEach((str) => {
      const url = `http://externService.com/${str}standings?seasonNr=${seasonNr}&matchdayNr=${matchdayNr}`;
      makeHttpRequestTo(url)
        .then((resp) => {
          this[str + 'Standings'] = resp;
        });
    });
}

Answer 3

Чтобы создать Обещание , вам нужно вызвать новое Обещание ((решить, отклонить) => {вернуть "Пиццу";})

Выделая это правильно

Если вы хотите, вы можете сократить код, используя массив (и его функции, такие как map и т. д.), но это не улучшит его производительность