Angular run 2 asynchronous calls at the same time, but don't process the second callback until the first one has finished
I am using the Angular $ q service to make asynchronous requests. I have 2 requests, for example (let's assume I have an Angular service named MyService that handles these requests):
MyService.Call1().then(function() {
//do all the first callback processing here without waiting for call 2
});
MyService.Call2().then(function() {
//wait for results of first callback before executing this
});
I have no guarantee that the second call will complete after the first, but I need the results of call 1 to do the processing in call 2. I understand that I could string the promises together, which means that call 2 waits for call 1 before the request completes. but I want to run both requests at the same time since I have all the data I need to do this What's the best way to do this?
Edit: I can immediately use the results of the first call. They give some diagrams on my page. I do not want the first call to wait for the second call to process it. I think it excludes mechanisms like $ q.all ()
source to share
An alternative to usage $q.all
would be to use the first promise in the handler for the second. for example
var p1 = MyService.Call1().then(function(data) {
return processedData;
});
MyService.Call2().then(function(call2Data) {
return p1.then(function(call1Data) {
// now you have both sets of data
});
});
To address some of the comments, here you can handle errors / promise rejections without waiting for both promises to resolve or create multiple handlers catch
...
var p2 = MyService.Call2().then(function(call2Data) {
return p1.then(function(call1Data) {
// now you have both sets of data
});
});
// use `$q.all` only to handle errors
$q.all([p1, p2]).catch(function(rejection) {
// handle the error here
});
source to share
You can make both calls in parallel with all
$q.all([MyService.Call1(), MyService.Call2()]).then(function() {
// ...code dependent on both calls resolving.
});
Edit . In response to the comment, there are two things that might interest you. If you pass the array in all
, you will find the permissions array as the first argument to your function inside then
. If you pass an object in instead all
, you find the object as the first argument, with keys matching the same keys you passed in all
.
$q.all([MyService.Call1(), MyService.Call2()]).then(function(arr) {
// ...code dependent on the completion of both calls. The result
// of Call1 will be in arr[0], and the result of Call2 will be in
// arr[1]
});
... and with objects
$q.all({a: MyService.Call1(), b: MyService.Call2()}).then(function(obj) {
// ...code dependent on the completion of both calls. The result
// of Call1 will be in abj.a, and the result of Call2 will be in
// obj.b
});
source to share