await { ... } in JavaScript?

Question

I have a bunch of async functions, that I always or nearly always want to call synchronously. So we all know the pattern

async function somethingcool() {
  return new Promise(resolve => {
    setTimeout(resolve, 1000, "Cool Thing");
  });
}    
const coolthing = await somethingcool();
console.log(coolthing);

But I have this cool module called manycooolthings which offers many cool things, all via async functions that I always or nearly always want to await on.

import * as cool from 'manycoolthings';
await cool.updateCoolThings();
const coolThing = await cool.aCoolThing();
const anohtherCoolThing = await cool.anotherCoolThing();
const rus = await cool.coolThingsAreUs();
await cool.sendCoolThings();
await cool.postCoolThing(myCoolThing);
await cool.moreCoolThings();
const thingsThatAreCool = await cool.getThingsThatAreCool();

Extremely contrived and silly example, to illustrate the point. I do have a genuine use case, a set of tests based on puppeteer where most functions are async and they almost always want to be awaited on.

There must be a better way to avoid all the await pollution of our JavaScript code.

It would be great if could do something like

import * as cool from 'manycoolthings';
await {
  cool.updateCoolThings();
  const coolThing = cool.aCoolThing();
  const anotherCoolThing = cool.anotherCoolThing();
  const rus = cool.coolThingsAreUs();
  cool.sendCoolThings();
  cool.postCoolThing(myCoolThing);
  cool.moreCoolThings();
  const thingsThatAreCool = cool.getThingsThatAreCool();
}

Or even just

import * as cool from 'manycoolthings';
cool.updateCoolThings();
const coolThing = cool.aCoolThing();
const anotherCoolThing = cool.anotherCoolThing();
const rus = cool.coolThingsAreUs();
cool.sendCoolThings();
cool.postCoolThing(myCoolThing);
cool.moreCoolThings();
const thingsThatAreCool = cool.getThingsThatAreCool();

without having to worry if the method being called is async or not, because it's defined as an auto await function or something.

There are many alternative ways of writing this (strange) list of calls, none clearer and simpler than just putting await in front of the promise returning functions. — Denys Séguret
– Denys Séguret, Commented Feb 9, 2018 at 11:44
The first options looks a bit ambiguous to me. Every line will be awaited, or every line will run async and when all finish the flow will proceed? — nemo
– nemo, Commented Feb 9, 2018 at 11:45
I don't think such thing exists, but consider this: before await, to run async calls consecutively you'd be forced to chain/nest thens or worse. So code with await looks very good in comparison :) — Sergio Tulentsev
– Sergio Tulentsev, Commented Feb 9, 2018 at 11:45
You could also wrap the functions to put the returned promises in a promise queue : you would just have to add one await for this queue (the wrapping could be done in a generic way) — Denys Séguret
– Denys Séguret, Commented Feb 9, 2018 at 11:47

georg · Accepted Answer · 2018-02-09 12:22:22Z

3

If you're unhappy with multiple awaits or thens, you can make a little "sequence" helper:

let _seq = async fns => fns.reduce((p, f) => p.then(f), Promise.resolve(null))

and use it like this:

result = await seq(
  _ => cool.updateCoolThings(),
  _ => _.aCoolThing(),
  _ => _.anotherCoolThing(),
  _ => _.coolThingsAreUs(),
)

which is almost your snippet #2.

answered Feb 9, 2018 at 12:22

georg

216k57 gold badges324 silver badges401 bronze badges

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

Collectives™ on Stack Overflow

await { ... } in JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related