How to get a JavaScript class method to wait to return data until data in the constructor is loaded?

Question

How do I get the list() method to wait for the data to be loaded in the constructor before it resolves its promise back to the caller?

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());
})();

[Don't load data in the constructor in the first place](https://stackoverflow.com/q/24398699/1048572). — Bergi, Mar 10 '22 at 05:28
Also, do you even need to use a `class`? It looks like you are trying to create a singleton. For that, just use an object literal. — Bergi, Mar 10 '22 at 05:29
Why not put the `fetch` call directly inside the `list()` method? — Bergi, Mar 10 '22 at 05:30
[calling an async function in the constructor.](https://stackoverflow.com/questions/49694779) — adiga, Mar 10 '22 at 05:31

Nicholas Tower · Accepted Answer · 2022-03-10T05:18:38.620

I recommend having the constructor save the promise from the data loading onto this, and then list can await that 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})`));
  }
}

If the load hasn't finished yet, then the await will cause list to wait however long is necessary. If loading has finished, then initPromise is in a resolved state, and list will resume more or less immediately (when the microtask queue executes).

luiscla27 · Answer 2 · 2022-03-10T06:36:29.747

Use a Deferred object.

a deferred represents work that is not yet finished

// fetch mock with 3 seconds wait
fetch = () => {
     return new Promise((resolve) => {
         setTimeout(() => {
             resolve({
                 json: () => new Promise((r) => r([
                        {firstName: 'Arthur', lastName: 'Pym', id: 1},
                        {firstName: 'August', lastName: 'Barnard', id: 2},
                        {firstName: 'M.', lastName: 'Poe', id: 3}
                 ]))
             });
         }, 3000);
     });
}

class MyDeferred {
    resolve = null;
    reject = null;
    promise = null;
    constructor() {
        this.promise = new Promise((res, rej) => {
            this.resolve = res;
            this.reject = rej;
        });
    }
}

class Employees {
    deferred = new MyDeferred();
    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;
            this.deferred.resolve();
            console.log(`work done: got ${this.employees.length} employees`);
        })();
    }

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

}

const employees = new Employees();

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

How to get a JavaScript class method to wait to return data until data in the constructor is loaded?

2 Answers2