How to await a value being set asynchronously?

Question

Anticipated FAQ:

• Yes, I know what a Promise is.
• No, I can't simply move the init logic to the constructor. It needs to be called in the initMethod because the initMethod is a hook that needs to be called at a certain time.

Sorry, it's just that I saw some similar questions marked as "duplicate", so I wanted to put these FAQ at the top.

Question

My issue is the following race condition:

class Service {

  private x: string | null = null;

  initMethod() {
    this.x = 'hello';
  }

  async methodA() {
    return this.x.length;
  }
}

const service = new Service();
setTimeout(() => service.initMethod(), 1000);
service.methodA().catch(console.log);

TypeError: Cannot read properties of null (reading 'length')
    at Service.methodA (<anonymous>:15:19)
    at <anonymous>:20:9
    at dn (<anonymous>:16:5449)

I need something like a Promise whose settled value can be set from another part of the code. Something like:

class Service {

  private x: SettablePromise<string> = new SettablePromise();

  initMethod() {
    this.x.set('hello');
  }

  async methodA() {
    return (await this.x).length;
  }
}

const service = new Service();
setTimeout(() => service.initMethod(), 1000);
service.methodA().catch(console.log);

The best I can come up with is to make a class that polls a value until it turns non-null. I'm hoping there's something smarter. I don't want to have to fine-tune a poll interval.

Edits

Sorry for the initial confusing example. The race condition is that methodA can be called before initMethod.

There was also an unnecessary async in the initMethod. I just made it async because the real method it was based on is async.

Answer 1

In the following example, you can run the init before or after the async method call. Either will work -

const s = new Service()
// init
s.init()
// then query
s.query("SELECT * FROM evil").then(console.log)

const s = new Service()
// query first
s.query("SELECT * FROM evil").then(console.log)
// then init
s.init()

deferred

The solution begins with a generic deferred value that allows us to externally resolve or reject a promise -

function deferred() {
  let resolve, reject
  const promise = new Promise((res,rej) => {
    resolve = res
    reject = rej
  })
  return { promise, resolve, reject }
}

service

Now we will write Service which has a resource deferred value. The init method will resolve the resource at some point in time. The asynchronous method query will await the resource before it proceeds -

class Service {
  resource = deferred() // deferred resource
  async init() {
    this.resource.resolve(await connect()) // resolve resource
  }
  async query(input) {
    const db = await this.resource.promise // await resource
    return db.query(input)
  }
}

connect

This is just some example operation that we run in the init method. It returns an object with a query method that mocks a database call -

async function connect() {
  await sleep(2000) // fake delay
  return {
    query: (input) => {
      console.log("running query:", input)
      return ["hello", "world"] // mock data result
    }
  }
}

function sleep(ms) {
  return new Promise(r => setTimeout(r, ms))
}

demo

function deferred() {
  let resolve, reject
  const promise = new Promise((res,rej) => {
    resolve = res
    reject = rej
  })
  return { promise, resolve, reject }
}

class Service {
  resource = deferred()
  async init() {
    this.resource.resolve(await connect())
  }
  async query(input) {
    const db = await this.resource.promise
    return db.query(input)
  }
}

async function connect() {
  await sleep(2000)
  return {
    query: (input) => {
      console.log("running query:", input)
      return ["hello", "world"]
    }
  }
}

function sleep(ms) {
  return new Promise(r => setTimeout(r, ms))
}

const s = new Service()
s.query("SELECT * FROM evil").then(console.log)
s.init()

always handle rejections

If init fails to connect to the database, we need to reflect that with the resource, otherwise our program will hang indefinitely -

class Service {
  resource = deferred()
  async init() {
    try {
      const db = await timeout(connect(), 5000) // timeout
      this.resource.resolve(db)
    }
    catch (err) {
      this.resource.reject(err) // reject error
    }
  }
  async query(input) {
    const db = await timeout(this.resource.promise, 5000) // timeout
    return db.query(input)
  }
}

function timeout(p, ms) {
  return Promise.race([
    p,
    sleep(ms).then(() => { throw Error("timeout") }),
  ])
}

Answer 2

As I understand it, you need to have a promise settled within constructor but it have to be resolved only when initMethod is called.

You can expose a promise resolver alongside the promise :

class Service {
 private x: string | null = null;
  private promise;
  private resolve;

  constructor() {
     this.promise = new Promise(resolve => this.resolve = resolve);
  }

  async initMethod() {
    // Do your async stuff
    await new Promise(resolve => setTimeout(resolve, 1000));
    this.x = 'hello';
    // And resolve Service promise
    this.resolve();
  }

  async methodA() {
    await this.promise;
    return this.x.length;
  }
}

See Resolve Javascript Promise outside the Promise constructor scope for more examples.

Answer 3

You need to initialise a property with a Promise value that only resolves after initMethod() has completed.

This involves also maintaining the promise's resolve callback as a class property.

class Service {

  #initResolve;
  #initPromise = new Promise((resolve) => {
    this.#initResolve = resolve;
  });
  
  #x = null;

  async initMethod() {
    await new Promise(resolve => setTimeout(resolve, 1000));
    this.#x = 'hello';
    this.#initResolve(); // resolve #initPromise
  }

  async methodA() {
    await this.#initPromise;
    return this.#x.length;
  }
}

const service = new Service();
console.log("methodA: start");
service.methodA().then(console.log.bind(console, "methodA: end:"));

setTimeout(async () => {
  console.log("initMethod: start");
  await service.initMethod()
  console.log("initMethod: end");
}, 1000);

Note: Using JavaScript private class features for the Snippet but I'm sure you can translate it to Typescript.