JavaScript/Angular 1 - Promise.all to async-await

Question

I assign two calls to the web service in two variables in referencesPromise and contactTypesPromise $onInit() (I can create a new method for that, if needed)

$onInit() {
  const referencesPromise = this.ReferenceService.getMultipleReferences(this.AgentReferences)
  const contactTypesPromise = this.ContactService.getContactTypes()
  Promise.all([referencesPromise, contactTypesPromise]).then((responses) => {
    this.references = responses[0]
    this.contactTypes = responses[1]
    const stateParams = this.$state.params
    return this.setContactSteps()
  })
}

What is his alternative with async-await?

(for AngularJS) you should be using [`$q.all()`](https://docs.angularjs.org/api/ng/service/$q#all) instead of `Promise.all()` — Aleksey Solovey, Jan 18 '18 at 10:52

score 3 · Accepted Answer · answered Jan 18 '18 at 10:37

3

Assuming you still want your methods to run concurrently there aren't too many changes to make:

async $onInit() {
  const referencesPromise = this.ReferenceService.getMultipleReferences(this.AgentReferences);
  const contactTypesPromise = this.ContactService.getContactTypes();

  this.references = await referencesPromise;
  this.contactTypes = await contactTypesPromise;
  const stateParams = this.$state.params;
  return this.setContactSteps();
}

Note how the initial calls are the same, we still want to capture the promises as we want both requests to run at the same time.

answered Jan 18 '18 at 10:37

UncleDave

6,872
1
26
44

Please note a slight difference in semantics since you do not use the "all" combinator: If only the contactTypesPromise is rejected, this would still assign the "references" variable which it does not do with the "all" combinator. – Florian Jan 18 '18 at 10:43
Good point - if the original "if one blows up it should all blow up" error handling is desirable it can be recreated with a try catch. – UncleDave Jan 18 '18 at 10:45
[You must not do this.](https://stackoverflow.com/questions/46889290/waiting-for-more-than-one-concurrent-await-operation) – Bergi Jan 19 '18 at 06:17

score 0 · Answer 2 · answered Jan 19 '18 at 06:19

There is no replacement for Promise.all in async/await syntax. It still works on promises, it's sugar for then calls only.

So use

async $onInit() {
  const referencesPromise = this.ReferenceService.getMultipleReferences(this.AgentReferences)
  const contactTypesPromise = this.ContactService.getContactTypes()
  const responses = await Promise.all([referencesPromise, contactTypesPromise])
  this.references = responses[0]
  this.contactTypes = responses[1]
  const stateParams = this.$state.params
  return this.setContactSteps()
}

(this works a bit different than your original code which did not return anything from $onInit, not sure whether that was intentional - an async function always returns a promise)

score -1 · Answer 3 · answered Jan 18 '18 at 10:39

You can use $q.all() for the alternate of your need as per the given example as shown below,

$q.all([this.ReferenceService.getMultipleReferences(this.AgentReferences), this.ContactService.getContactTypes()]).then(function(result) {
    this.referencesPromise = result[0];
    this.contactTypesPromise = result[1];
    this.stateParams = this.$state.params;
    return this.setContactSteps();
});

JavaScript/Angular 1 - Promise.all to async-await

3 Answers3

Linked