Асинхронная функция, возвращающаяся до завершения ожидания

Question

У меня есть два вопроса из следующего примера:

Почему x регистрируется перед y?Почему xa Promise?

Я ожидаю, что bar будет ждать foo, чтобы решить со значением 'Hello', прежде чем оно регистрируется, а затем возвращает его.

let foo = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Hello');
        }, 2000);
    })
}

let bar = async () => {
    let y = await foo();
    console.log(y);
    return y;
}

let x = bar();

console.log(x);

ЧтоЯ ожидаю увидеть

'Hello' // console.log(y)
'Hello' // console.log(x)

Что я получаю

 Promise {<pending>}  // console.log(x)
 'Hello'              // console.log(y)

Не следует ли bar дождаться разрешения foo, прежде чем вернуть y?

Любая помощь будет высоко ценится!

Answer 1

Вот документация о async function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

И Promise объекте: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Утверждается, что async function возвращает Promise объекткоторый находится в состоянии pending до его разрешения.

---

Теперь давайте посмотрим на ваш код:

Вы присваиваете x возвращаемое значение bar(), котороеявляется Promise, так как нет ключевого слова await, чтобы остановить выполнение (и вы не можете добавить его, потому что вы находитесь за пределами async function), это обещание регистрируется как ожидающее, потому что async function bar() еще не было

Между тем, в async function bar() вы присваиваете y возвращаемое значение async function foo(), которое также является Promise, но на этот раз вы ожидаете результата.После 2 секунд ожидания обещание выполняется, и y регистрируется с параметром метода resolve(), который равен Hello.

Таким образом, наблюдаемое вами поведение является ожидаемым.

Answer 2

Вы должны использовать await перед вызовом bar(), но на самом деле вы можете использовать await только тогда, когда вы обернули его функцией async, как показано ниже:

async function Func() {

  let foo = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Hello');
      }, 2000);
    })
  }

  let bar = async () => {
    let y = await foo();
    console.log(y);
    return y;
  }

  let x = await bar();

  console.log(x);

}

Когда вывыполнить Func(); ваше ожидание сработает.

Answer 3

Вам нужно await функция:

let example = async () => {
    let foo = () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('Hello');
            }, 2000);
        })
    }

    let bar = async () => {
        let y = await foo();
        console.log(y);
        return y;
    }

    let x = await bar();

    console.log(x);
}

example();