如何将 async-await 与 Promise.all() 一起使用？

Question

目前我正在使用下面的代码来获取使用异步等待的几个 Promise 的结果：

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 值的最佳方法吗，其中 Promise 不需要等待对方结束，而是使用 Promise.all() 同时工作还是有更好的方法制作例如多个httpRequests，因为这看起来很重复？

Answer 1

您的 URL 都遵循相同的模式，因此您可以通过 mapping 一组 ['', 'home', 'away', 'form'] 到 URL 来大大减少您的代码。然后，map那些通过makeHttpRequestTo到Promises的URL，然后你可以将等待的结果解构到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 2

如果您不想在继续执行流程之前等待所有请求完成，您可以将类的属性设置为 promise：

class Matchday {
  constructor(seasonNr, matchdayNr, matches) {
    this.seasonNr = seasonNr;
    this.matchdayNr = matchdayNr;
    this.matches = matches;
    ['standings', 'homeStandings', 'awayStandings', 'formStandings'].forEach(propertyName => {
      let url = `http://externService.com/${propertyName.toLowerCase()}`
        + `?seasonNr=${seasonNr}&matchdayNr=${matchdayNr}`
      this[propertyName] = makeHttpRequestTo(url)
    });
  }
}

使用以下sn-p进行测试

class Matchday {
  constructor(seasonNr, matchdayNr, matches) {
    this.seasonNr = seasonNr;
    this.matchdayNr = matchdayNr;
    this.matches = matches;
    ['standings', 'homeStandings', 'awayStandings', 'formStandings'].forEach(propertyName => {
      let url = `http://externService.com/${propertyName.toLowerCase()}`
        + `?seasonNr=${seasonNr}&matchdayNr=${matchdayNr}`
      this[propertyName] = makeHttpRequestTo(url)
    });
  }
}

/**************************************
 * Test harness
 **************************************/
 
function makeHttpRequestTo(url) {
  // Fake an AJAX httpRequest to url
  const requested_resource = url.match('^.*\/\/.*\/([^?]*)')[1];
  const fake_response_data = 'data for ' + url.match('^.*\/\/.*\/(.*)$')[1];
  let delay = 0;
  let response = '';
  switch (requested_resource) {
    // To make it interesting, let's give the 'standings' resource 
    // a much faster response time
    case 'standings':
      delay = 250;
      break;
    case 'homestandings':
      delay = 2000;
      break;
    case 'awaystandings':
      delay = 3000;
      break;
    case 'formstandings':
      delay = 4000; // <== Longest request is 4 seconds
      break;
    default:
      throw (util.format('Unexpected requested_resource: %s', requested_resource));
  }
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(fake_response_data), delay);
  });
}

async function testAccessingAllProperties() {
  const testId = "Test accessing all properties";
  console.log('\n%s', testId);
  console.time(testId)
  let md = new Matchday(2018, 21, []);
  console.log(await md.standings);
  console.log(await md.homeStandings);
  console.log(await md.awayStandings);
  console.log(await md.formStandings);
  console.timeEnd(testId)
}

async function testAccessingOnlyOneProperty() {
  const testId = `Test accessing only one property`;
  console.log('\n%s', testId);
  console.time(testId)
  let md = new Matchday(2018, 21, []);
  console.log(await md.standings);
  console.timeEnd(testId)
}

async function all_tests() {
  await testAccessingAllProperties();
  await testAccessingOnlyOneProperty();
}

all_tests();

结论

上面的sn-p表明执行时间没有被未访问的属性惩罚。并且访问所有属性的执行时间并不比使用promise.all差。

您只需要记住在访问这些属性时使用await。

Answer 3

回答，不，您不应该阻止其他 XHR 或任何不相互依赖的 I/O 请求。我会这样写你的函数；

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 4

要创建Promise，您需要调用 new Promise((resolve, reject) => { return "Pizza"; })

你做对了

如果您愿意，可以使用数组（及其函数如map 等...）来缩短代码，但不会提高其性能