Method chaining with async/await in TypeScript

Question

I have a situation where I need to call an async method on the result of an async method.

class Parent {
  constructor(private child: Child) { }

  private getChild(): Promise<Child> {
    return Promise.resolve(this.child);
  }

  async getResult(): Promise<Child> {
     return await this.getChild()
  }
}

class Child {
  getText(): Promise<string> {
    return Promise.resolve('text');
  }
}

let child = new Child();
let container = new Parent(child);

let printText = async () => {
  await (await container.getResult()).getText();
}

printText();

Is there a good way to avoid the need to double await? I think I'd like to just do await container.getChild().getText();. What's the right way to make an API in TypeScript that will allow me to chain methods that return promises and then wait for the result with a single await?

EDIT: To clarify, this is more of an API design question. Is there a better pattern for doing what I'm trying to do (call an async method on an object returned by an async method)? Even if it means doing something totally different?

Just a quick note, your anonymous function discards the text without doing anything. I'm not sure if you intended that or not. You can replace the outer await with a return and that might do what you want. — Patrick Roberts
– Patrick Roberts, Commented May 5, 2017 at 1:58
You're awaiting two things, so why would you hope to be able to write a single await? If you were using promises, you'd have to use then twice as well. You can write const result = await container.getResult(); await result.getText();. — user663031
– user663031, Commented May 5, 2017 at 2:33
The await container.getChild().getText(); syntax is not possible when getChild returns a promise, as promises don't have a getText method. End of story. — Bergi
– Bergi, Commented May 5, 2017 at 6:45

Bergi · Accepted Answer · 2017-05-09 22:02:11Z

8

Is there a way to design my API better so that users won't need the double await? Even if it means changing the structure of my example drastically.

You must not make getResult asynchronous, it needs to return a Result instance right away so that further methods can be called on it. Your example is a bit weird since getChild doesn't really need to be asynchronous at all. But lets assume it is, and does some important.

You then could write

class Parent {
  private async getChild(): Promise<Child> {
    … // whatever
  }

  getResult(): Result {
     return new Result(this.getChild())
  }
}
class Result {
  constructor(p: Child) {
    this.promise = p;
  }
  async getText(): Promise<string> {
    return (await this.promise).getText();
  }
}

Now you can call parent.getResult().getText() directly. Basically, Result acts as a proxy wrapper around the Child class that does both the awaits. Maybe in your actual architecture you can even avoid the this.promise and do the child and text accesses in one step.

However, usually this is not worth it. Just let your caller await each step.

answered May 9, 2017 at 22:02

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

heathkit Over a year ago

Right, my example is contrived and doesn't really need to be asynchronous. Thanks, this is what I was looking for! I agree, just making people explicitly await is probably better, I just wanted to explore my options.

Collectives™ on Stack Overflow

Method chaining with async/await in TypeScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related