In my AngularJS function, I need to make two asynchronous calls that are independent of each other. However, the function should only return when both calls have completed and the results are stored in the return variable.
I have tried various solutions and ended up using the following approach. Unfortunately, it is quite slow as it waits for the first call to finish before proceeding to the second one.
function myAngularfunction(a, b) {
var defer = $q.defer();
var test= {
a: "",
b: ""
};
msGraph.getClient()
.then((client) => {
// First async call
client
.api("https://graph.microsoft.com/v1.0/")
.get()
.then((groupResponse) => {
var result = groupResponse;
test.a= result.displayName;
msGraph.getClient()
.then((client) => {
// Second async call
client
.api("https://graph.microsoft.com/v1.0/teams/")
.get()
.then((groupResponse) => {
var result = groupResponse;
test.b= result.displayName;
defer.resolve(test);
});
});
});
});
return defer.promise;
}
Function invocation:
myAngularfunction(a, b).then(function(obj)
Is there a way to wait for both calls within the same function without nesting them or waiting for the first call to finish before calling the second one?