使用 async/await 进行顺序（阻塞调用）返回过早

Question

下面是一个简单的例子来说明我为什么要尝试使用 fetch API。我希望 async fetchAsync() 会阻塞，直到它返回数据（或异常），但输出显示它没有。

constructor entering fetchAsync... ** we are here!!! ** leaving fetchAsync. finish initialization

当我的对象使用文件内容完成初始化时，我一直试图弄清楚如何在finish initialization 之后显示完成字符串 (we are here)。 await/async 不应该在完成之前阻塞吗？

class A {
    filename = "./resources/test.json";

    constructor() {
        console.log("constructor");
        this.fetchAsync(this.filename)
            .then( data => this.initialize(data)
            ).catch(reason => console.log(reason.message))
    }

    async fetchAsync(filename) {
        console.log("entering fetchAsync...");
        let data = await (await fetch(filename)).json();
        console.log("leaving fetchAsync.");
        return data;
    }

    initialize() {
        setTimeout(() => console.log("finish initialization"), 1000)
    }
}

let a = new A();
console.log("*** we are here!!! ***");

Answer 1

您一定忘记了asynchronous 的含义：

class A {
  constructor() {
      this.filename = "./resources/test.json";
      console.log("constructor");
      this.fetchAsync(this.filename)
          .then( data => this.initialize(data)
          ).catch(reason => console.log(reason.message))
  }

  async fetchAsync(filename){
      console.log("entering fetchAsync...");
      let data = await fetch(filename);
      console.log("leaving fetchAsync.");
      return data.json;
  }
  initialize() {
      setTimeout(() => {console.log("finish initialization"); console.log("*** we are here!!! ***"}, 1000)
  }
}
let a = new A();

Answer 2

await 不会阻塞 - 这对用户和应用程序非常不友好 - 它只是等待承诺解决后再继续，并且不能在顶层完成（然而）。如果您希望 we are here 仅在初始化完成后显示，那么您需要能够访问在初始化完成后解析的 Promise，然后对其调用 then。

您还应该确保 initalize 返回一个 Promise，以便它可以链接到 a 上的外部调用。

所以，你可以试试这样的：

const dummyRequest = () => new Promise(res => setTimeout(res, 1000, 'response'));

class A {
  // filename = "./resources/test.json";
  constructor() {
    console.log("constructor");
  }
  startFetch() {
    return this.fetchAsync(this.filename || 'foo')
      .then(data => this.initialize(data)).catch(reason => console.log(reason.message))
  }
  async fetchAsync(filename) {
    console.log("entering fetchAsync...");
    // let data = await (await fetch(filename)).json();
    const data = await dummyRequest();
    console.log("leaving fetchAsync.");
    return data;
  }

  initialize() {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log("finish initialization");
        resolve();
      }, 1000);
    });
  }
}

const a = new A();
a.startFetch()
  .then(() => {
    console.log("*** we are here!!! ***");
  });

构造函数不能异步，这就是我创建startFetch 函数的原因。