AJAX Calls & Promises

Arslan ur Rehman Iqbal
Jun 26 · 3 min read

Audience

This article is meant for those who are familiar with AJAX calls and knows what Promises are.

Let’s Go

The AJAX call have really made it easy calling the APIs and performing the appropriate action against the success/error of those calls. Now whenever there was a situation that two or more API calls were to be handled and that “appropriate action” was to be performed only after the success of both the calls, there was a hassle of dealing with callback functions and some communication mechanism to deal with that. But no more my friend. ES6 is here.

ES6 introduced the concept of Promises and with this also added an extension method Promise.all() and our life was made easy. Now if we want to perform one common action on the success of two or more API call, all we need to do is use Promise.all().

Consider following two AJAX calls that needs to run independently but a single action needs to be performed (e.g. hiding the loader from screen) on success of both the calls.

function GetFoo() {
$.ajax({
url: ‘Api/Foo/Get’,
type: ‘GET’,
success: function(data) {
console.log(data); // do somehting with data
DoSomething(); // The Common Action
},
error: function(error) {
console.log(error)
},
})
};
function GetBar() {
$.ajax({
url: ‘Api/Bar/Get’,
type: ‘GET’,
success: function(data) {
console.log(data); // do somehting with data
DoSomething(); // The Common Action
},
error: function(error) {
console.log(error)
},
})
};

You can see if we call both the functions, the DoSomething() will be called on success of any of the function. Here is when the Promises come to play. First, we will have to convert the AJAX calls to Promises, which is very easy.

GetFooPromise(){
return new Promise((resolve, reject) => {
$.ajax({
url: ‘Api/Foo/Get’,
type: ‘GET’,
success: function(data) {
console.log(data);
resolve(data);
},
error: function(error) {
console.log(error);
reject(error);
},
})
})
};
GetBarPromise(){
return new Promise((resolve, reject) => {
$.ajax({
url: ‘Api/Bar/Get’,
type: ‘GET’,
success: function(data) {
console.log(data);
resolve(data);
},
error: function(error) {
console.log(error);
reject(error);
},
})
})
};

Now all that left is to resolve these promises using Promise.all().
Promise.all() accepts an array of promises as an input and on success, gives an array of responses as output. General syntax for this method is as follows:

Promise.all([promise1, promise2, promise3. . .])
.then((responses) => {
console.log(responses);
})
.catch((error) => {
console.log(error);
});

Using Promise.all() in our scenario:

var fooPromise = GetFooPromise();
var barPromise = GetBarPromise();
Promise.all([fooPromise, barPromise])
.then((responses) => {
DoSomething(); // The Common Action
})
.catch((error) => {
console.log(error);
});

Here we are. We have achieved what we wanted. The method DoSomething() will be called on success of both the promises i.e. when API call is completed with success.

NOTE: Promise.all() behavior is different in case of errors. Promise.all() will continue to wait for other promises to resolve as long as no promise goes to reject state. When it receives first reject, Promise.all() will go in error state i.e. catch section of the code and now success state i.e. then section is not achievable anymore. Note that when it comes to error state, it doesn’t mean that the promises in the array will also stop to run, instead they will continue to run but now we will not be able to know weather any of the remaining promises are resolved or rejected.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade