Transforming JavaScript/Angular 1 from using Promise.all to async-await technique

Question

Transforming JavaScript/Angular 1 from using Promise.all to async-await technique

Within the $onInit() function, I set two web service calls to run concurrently and store their responses in variables named referencesPromise and contactTypesPromise. If necessary, a new method can be created for this purpose.

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

In what way could async-await provide an alternative solution for this?

javascript angularjs async-await ecmascript-2017

Answer 1

Answer №1

In order to maintain concurrent execution of your methods, there are only a few adjustments that need to be made:

async $onInit() {
  const itemsPromise = this.ItemService.getMultipleItems(this.AgentItems);
  const categoryPromise = this.CategoryService.getCategories();

  this.items = await itemsPromise;
  this.categories = await categoryPromise;
  const stateParams = this.$state.params;
  return this.updateItemStatus();
}

It's important to notice that the initial method calls remain unchanged, as we still want to store the promises to ensure that both requests happen simultaneously.

Answer 2

In order to maintain concurrent execution of your methods, there are only a few adjustments that need to be made:

async $onInit() {
  const itemsPromise = this.ItemService.getMultipleItems(this.AgentItems);
  const categoryPromise = this.CategoryService.getCategories();

  this.items = await itemsPromise;
  this.categories = await categoryPromise;
  const stateParams = this.$state.params;
  return this.updateItemStatus();
}

It's important to notice that the initial method calls remain unchanged, as we still want to store the promises to ensure that both requests happen simultaneously.

Answer 3

Answer №2

When using the async/await syntax, there is no direct equivalent to Promise.all. It still operates on promises and is essentially just syntactic sugar for multiple then calls.

Therefore, you can implement it like this:

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

(It's worth noting that this approach differs slightly from your original code which did not include a return statement in the $onInit function. Just remember that an async function always returns a promise.)

Answer 4

When using the async/await syntax, there is no direct equivalent to Promise.all. It still operates on promises and is essentially just syntactic sugar for multiple then calls.

Therefore, you can implement it like this:

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

(It's worth noting that this approach differs slightly from your original code which did not include a return statement in the $onInit function. Just remember that an async function always returns a promise.)

Answer 5

Answer №3

To achieve the desired outcome in a different way, you can utilize $q.all(). The following example demonstrates how it can be implemented:

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

Answer 6

To achieve the desired outcome in a different way, you can utilize $q.all(). The following example demonstrates how it can be implemented:

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

Transforming JavaScript/Angular 1 from using Promise.all to async-await technique

Answer №1

Answer №2

Answer №3

Similar questions

Following an ajax request, the tooltip feature in bootstrap fails to function properly

Troubleshooting Firefox's inability to properly utilize jQuery's scrollTop() function on the 'body' element

Refreshing the page using AJAX in WooCommerce after executing my custom script

execute a rigorous compilation during the ng build angular process

Struggling to click on a dynamic link before it times out

An ongoing problem in ThreeJS involves the resizing of images that are not in a power of 2

Regain access to your account by resetting your password through the use of text messaging with Ionic

Tips for organizing JSON data in AngularJS are as follows:

Importing textures and loading mtl files in Three.js from various web addresses

Obtain a specific element in Puppeteer JS by utilizing the waitForSelector function to detect when its class name changes

Could JSON be improved for better space efficiency, or is this the standard format?

Is it possible to hide a div using Media Queries until the screen size becomes small enough?

How to send emails in the background using a React Native app

Ways to identify if a resize event was caused by the soft keyboard in a mobile browser

Tips on choosing the initial option in an Angular JS dropdown menu as the default selection

ClickAwayListener doesn't function correctly when used in conjunction with Collapse or Fade animations

Adding a character sequence to a parsed JSON object results in a literal string outcome

What should you do when you need to send a message from a website to an MQTT broker that lacks Websockets support?

Navigating to JSON input in Express correctly

What is the best way to transfer a property-handling function to a container?