Merging two promises into a single promise in Angular

Question

Merging two promises into a single promise in Angular

In my application, I am facing a challenge with implementing a method named loadAll.

What I need to accomplish is to make calls to 2 different HTTP methods in order to load the necessary data.

Both of these methods return promises.

However, when I attempt to combine them into a single promise, I encounter an error.


loadAll() {
    return new Promise((resolve, reject) => {
      resolve(
        this.getAllItem1ToConnect(),
          this.getAllItem2ToConnect();
      );
    }
    );
}

I am aware that this implementation is incorrect. How should I go about solving this issue?

Here is the method for loading Item1:


getAllItem1ToConnect() {
    return this.http.get<Item1[]>(this.path + '/item').toPromise().then((res: Item1[]) => {
      this.items1 = res;
    });
}

Is there a way to merge the functionalities of getAllItem1ToConnect and getAllItem2ToConnect into a single promise?

angular typescript promise

Answer 1

Answer №1

Utilizing Promise.all is the recommended approach in this scenario. It accepts an array of Promises and consolidates them into a single Promise.

function getResults1() {
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve('from function 1'), 1000);
  });
}

function getResults2() {
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve('from function 2'), 1000);
  });
}

Promise.all([getResults1(), getResults2()]).then(result => console.log(result));

In your specific case, the code should look like this:

const combinedPromise = Promise.all([
  this.getAllItem1ToMerge(),
  this.getAllItem2ToMerge()
]);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Answer 2

Utilizing Promise.all is the recommended approach in this scenario. It accepts an array of Promises and consolidates them into a single Promise.

function getResults1() {
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve('from function 1'), 1000);
  });
}

function getResults2() {
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve('from function 2'), 1000);
  });
}

Promise.all([getResults1(), getResults2()]).then(result => console.log(result));

In your specific case, the code should look like this:

const combinedPromise = Promise.all([
  this.getAllItem1ToMerge(),
  this.getAllItem2ToMerge()
]);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Merging two promises into a single promise in Angular

Answer №1

Similar questions

Cross-origin resource sharing (CORS) implemented in an environment combining Electron,

Issue: Vue TypeScript module not foundDescription: When using

TSLint Errors Update: The configuration provided cannot locate implementations for the following rules

Create a combined string from a structure resembling a tree

Updating token (JWT) using interceptor in Angular 6

Conceal the Button when the TextBox does not contain valid input

Steps for developing a Global service in Angular

Steps for adding an array of JSON objects into a single JSON object

What could be the reason my Angular Bearer Token is not showing up in Firefox?

What is the best approach for unit testing canActivate in Angular?

UI and `setState` out of sync

The error message "NodeJS TypeError: Model is not a constructor" indicates that

Issue with Formik compatibility in Next JS 14 Application Structure

Unlike other checkbox components, mat-checkbox does not respond to a false condition unless double-clicked

When running npm start on a Windows system, an error message stating "Node.js version 14.9.0 detected" is displayed

Provide an immutable parameter to a function that will not cause any changes

An issue occurs with Material Dialog getting stuck when it is triggered by clicking on a Leaflet

What steps should I take in order to correctly implement the onChange event and retrieve the event.target.value in my

Error TS2394: Function implementation does not match overload signature in Typescript

Implementing multer diskStorage with Typescript