如何让 JavaScript 类方法等待返回数据，直到加载构造函数中的数据

发布于03月10日

如何让list()方法等待数据加载到构造函数中，然后再将其promise 解析回调用方？

import fetch from 'node-fetch';

class Employees {
    constructor() {
        if (Employees._instance) {
            return Employees._instance
        }
        Employees._instance = this;

        this.employees = [];
        this.dataLoaded = false;

        this.url = 'https://raw.githubusercontent.com/graphql-compose/graphql-compose-examples/master/examples/northwind/data/json/employees.json';

        (async () => {
            const response = await fetch(this.url);
            this.employees = await response.json();
            this.dataLoaded = true;
            console.log(`work done: got ${this.employees.length} employees`);
        })();
    }

    list() {
        return new Promise((resolve) => {
            resolve(this.employees.map(m => `${m.firstName} ${m.lastName} (${m.id})`));
        });
    }

}

const employees = new Employees();

(async () => {
    console.log(await employees.list());
})();

推荐答案

我建议让构造器将promise 从数据加载保存到this，然后list可以等待该promise :

class Employees() {
  constructor() {
    if (Employees._instance) {
      return Employees._instance
    }
    Employees._instance = this;

    this.employees = [];
    this.dataLoaded = false;

    this.url = 'https://raw.githubusercontent.com/graphql-compose/graphql-compose-examples/master/examples/northwind/data/json/employees.json';
    
    this.initPromise = (async () => {
      const response = await fetch(this.url);
      this.employees = await response.json();
      this.dataLoaded = true;
      console.log(`work done: got ${this.employees.length} employees`);
    })();
  }

  async list() {
    await this.initPromise;
    return this.employees.map(m => `${m.firstName} ${m.lastName} (${m.id})`));
  }
}

如果加载尚未完成，则await将导致list等待多长时间.如果加载已完成，则initPromise处于已解析状态，list将或多或少立即恢复(当微任务队列执行时).