AngularJS allows for the execution of several asynchronous requests to a single API function, each with unique parameters

Question

AngularJS allows for the execution of several asynchronous requests to a single API function, each with unique parameters

How can I asynchronously call 3 independent API methods so that as soon as any one of them has completed, I can work with the response without waiting for the others to finish? I am looking for a solution similar to System.Threading.Tasks in C#.

var promise1 = $http.get("/api/city/boston");
promise1.success(function(name) {
   console.log("Your city is: " + name);
});

var promise2 = $http.get("/api/city/newyork");
promise2.success(function(name) {
   console.log("Your city is: " + name);
});

var promise3 = $http.get("/api/city/chicago");
promise3.success(function(name) {
   console.log("Your city is: " + name);
});

javascript angularjs asynchronous

Answer 1

Answer №1

It seems that your code may not function as expected. The variables you are using are promise1, promise2, promise3, but when resolving them, you have only utilized promise.resolve.

Additionally, instead of "success," it is recommended to use "then." For example:

$http.get(url).then(function(response){
    //perform actions with the response data
});

Answer 2

It seems that your code may not function as expected. The variables you are using are promise1, promise2, promise3, but when resolving them, you have only utilized promise.resolve.

Additionally, instead of "success," it is recommended to use "then." For example:

$http.get(url).then(function(response){
    //perform actions with the response data
});

Answer 3

Answer №2

When working with Angular, use $q.race() to handle the first completed task and $q.all() for when all tasks are completed.

To simplify requests, consider creating a function to map out request promises.

Remember that using success() is now deprecated.

For example:

const getCityData = (city) => {
   return $http.get(`/api/city/${city}`).then(res => res.data)
}

const requestPromises = ['boston','newyork','chicago'].map(getCityData);

$q.race(requestPromises).then(data => console.log('First one completed ', data));

$q.all(requestPromises).then(dataArray => console.log('All completed', dataArray ))
                       .catch(err => console.log('Something failed', err)

Ensure you have injected the $q service in the controller or service where this code is executed.

Read more about $q in the Angular documentation

Answer 4

When working with Angular, use $q.race() to handle the first completed task and $q.all() for when all tasks are completed.

To simplify requests, consider creating a function to map out request promises.

Remember that using success() is now deprecated.

For example:

const getCityData = (city) => {
   return $http.get(`/api/city/${city}`).then(res => res.data)
}

const requestPromises = ['boston','newyork','chicago'].map(getCityData);

$q.race(requestPromises).then(data => console.log('First one completed ', data));

$q.all(requestPromises).then(dataArray => console.log('All completed', dataArray ))
                       .catch(err => console.log('Something failed', err)

Ensure you have injected the $q service in the controller or service where this code is executed.

Read more about $q in the Angular documentation

AngularJS allows for the execution of several asynchronous requests to a single API function, each with unique parameters

Answer №1

Answer №2

Similar questions

Obtaining the data value from a style applied to a div element in an E-commerce platform like MyShop

Having trouble with filtering an array using the some() method of another array?

Discovering the Authentic Page upon Completion of Load using PhantomJS

Displaying NodeJS error messages directly in the main HTML file

Bypassing the "Your connection is not private" error in NodeJS + Express with fetch() using Javascript

What is the best approach to implement pagination in the UI-Bootstrap Typeahead Directive?

AngularJS showcasing data in a visually appealing layout

Analyzing vast datasets from contrasting perspectives

Holding off on routing the pathName through the router until the next-page-transitions have been completed

What is the best way to create a test for a program that relies on standard output?

Display additional javascript code for expanding a marquee

What could be causing my reducer function to return 'NaN'?

Updating user attributes as an administrator using the Cognito SDK

Having trouble extracting data from JSON object with an AJAX request

When using jQuery to enable contenthover on divs, they will now start a new line instead of

Recursive sorting and parsing of JSON data with multiple levels

Error message "Script start is missing" found in install.json for socket.io-php package

If a div element includes a specific text, then update that portion of the text without altering the value of any variables

Ways to simultaneously apply fade in and fade out effects using CSS

Selecting options from a pop-up menu