在等待完成之前返回的异步函数

Question

我从以下示例中得到两个问题：

为什么x在y之前记录？ 为什么xa承诺？

我期待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处于pending状态。

---

现在让我们来看看你的代码：

您为x分配了返回值bar() ，这是一个Promise ，因为没有await关键字来停止执行（而且你不能添加一个，因为你在async function ）这个promise被记录为pending因为async function bar()尚未返回。

同时，在async function bar() ，为y分配async function foo()的返回值，它也是一个Promise ，但这次你等待结果。 经过2秒的等待时间后，承诺得以实现，并使用resolve()方法的参数记录y ，即Hello 。

因此，您见证的行为是预期的行为。

Answer 2

你需要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();

Answer 3

你应该在调用bar()之前使用await ，但实际上，你可以使用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(); 你的期望会激发。