Понимание, где разместить ключевое слово `await`

Question

Просто чтобы убедиться, что я понимаю, как работает async/await, я бы хотел кое-что подтвердить. Позвольте мне сначала создать пару функций:

let resolveAfter2Seconds = () => {
  console.log("starting slow promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(20);
      console.log("slow promise is done");
    }, 2000);
  });
};

let resolveAfter1Second = () => {
  console.log("starting fast promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(10);
      console.log("fast promise is done");
    }, 1000);
  });
};

Теперь возьмем эти два блока кода, например:

let concurrentStart = async () => {
  console.log('==CONCURRENT START with await==');
  const slow = resolveAfter2Seconds();
  const fast = resolveAfter1Second();

  console.log(await slow);
  console.log(await fast);
}

Теперь, это так, что вышесказанное функционально эквивалентно этому:

let concurrentStart = async () => {
  console.log('==CONCURRENT START with await==');
  const slow = await resolveAfter2Seconds();
  const fast = await resolveAfter1Second();

  console.log(slow);
  console.log(fast);
}

Другими словами, я могу либо поставить ключевое слово await прямо перед вызовом функции await resolveAfter25Seconds(), либо ... Я могу поместить await в журнал консоли, который запускает срабатывание этой функции - console.log(await slow);.

Будет ли результат одинаковым в том смысле, что async / await будет работать одинаково в обоих случаях - и в этом случае вы могли бы достичь одного и того же с любым подходом?

Answer 1

Они ведут себя по-разному; Ваш первый пример выполняется в течение двух секунд, а второй - в течение трех секунд.

В первом случае медленный и быстрый разрешается запускать параллельно; во втором случае вы заставляете первое обещание выполнить еще до того, как запустите второе.

Реальный сценарий использования множества обещаний без await, если вы хотите получать несколько URL-адресов параллельно.

// assuming getUrlContents() returns a Promise
let promises = [
    getUrlContents('http://url1.com/'),
    getUrlContents('http://url2.com/'),
    getUrlContents('http://url3.com/')
];

// all URLs are currently fetching

// now we wait for all of them; doesn't particularly matter what order
// they resolve
let results = [
    await promises[0],
    await promises[1],
    await promises[2]
];

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

let a = await getUrlContents('http://url1.com/')
let b = await getUrlContents('http://url2.com/')
let c = await getUrlContents('http://url3.com/')
let results = [ a, b, c ];

Загрузка для b не начнется, пока не завершится a и т. Д.