Explanations about the new promise standard for Ajax calls in Angular 1.4, using the then() method.

We have explained Ajax in various articles, however some changes in the latest versions of this Javascript framework force us to make some updates related to the promise standard.

When we make a connection by Ajax it will always take a while for the response to be received. Thanks to the asynchronous behavior of Javascript, which does not block when faced with waiting situations, the promise pattern must be used to indicate the actions to be performed when that response from the server is produced.

In those, the operation of the promise system was shown through the success() and error() methods. These are now deprecated, so we need to start getting used to using the new standard with the then() method.

Note: even though the success() and error() methods are deprecated they still work, to ensure that code created for earlier versions of AngularJS does not fail. They are considered “legacy methods” and should not be used because they will no longer be supported in the future.

How to get the promise object

For the sake of memory, let’s look at the code for an Ajax call, using the $http service with the shortcut $http.get() method. This method will return the aforementioned “promise” object.

var promise = $http.get(“https://restcountries.eu/rest/v1/all”);

Although we will soon see that it is not generally necessary to save the object in a variable, but to directly chain the configuration of the “promise”.

then() method

On the promise object we can call the then() method. This allows us to define two functions with which we can indicate the actions to be carried out, both in the case of success in the request and in the case of error.

The common thing would be to use a method chaining system, which allows us to receive the promise object and then call its then() method to perform the appropriate actions when the server’s response is received.

$http.get(“http://example.com/url/ajax”) .then(function(res){ // actions to perform when response is received successfully }, function(res){ // actions to perform when an error response is received });

As you have seen, the then() method receives two parameters that we configure with two anonymous functions. The first of the functions is used to indicate the actions you want to perform when you receive a successful response from the server, that is, a response with an HTTP protocol status that it considers “everything correct”, status 200 for example. The second of the functions is used to indicate the actions to be carried out when receiving an error response, with a status such as 404, page not found, or 500, server execution error, etc.

Response parameter in anonymous functions

As a novelty, the anonymous functions that we assign to the then() method receive a response object.

.then(function(res){

This object has a series of attributes with the data of the response that we have received from the server. For example, we can find the “data” attribute, which would return the native Javascript object created from the JSON that is received in the response body. We can also find, for example, a “status” attribute with the exact value of the response status, 200, 404 or whatever.

To observe this new response object, I recommend you do a console.log() and thus you will be able to appreciate all the attributes that Angular gives us to indicate exactly how the Ajax request has gone. However, now we are going to put a small example where you can see how we can use this response object to produce a suitable output is an Ajax request with angularjs.

Complete Ajax example in AngularJS 1.4

Let’s start by first showing the HTML code for our example. We are connected to a public API called REST Countries, which provides us with various information about countries in the world.

This page will list all the countries returned by this API. In addition, the capital of the country will be shown next to it. The HTML code itself has links to REST Countries, in case you want to take a look at this very interesting API to make Ajax examples with Angular without having to worry about authentication.

Countries of the world

We are going to use the web service called ” Other Countries”. https://restcountries.eu/

The URL https://restcountries.eu/rest/v1/all returns all countries in the world.

{{countries.length}} found in the world

1. {{country.name}} – {{country.capital}}

Now we are going to show the JavaScript code of our “Module”. You’ll notice that you have a controller which is where we make the Ajax request to populate the array of countries with which to list on the page.

angular .module(“countriesApp”, ) .controller(“CountriesAppController”, ; $http.get(“https://restcountries.eu/rest/v1/all”) .then(function(res){ $scope.countries = res.data; }, function(res){ $scope.countries = ; }); }]);

Notice in the first anonymous function we sent to the then() method, how we made use of the response’s data attribute to assign it to the scope’s array of countries.

The second anonymous function indicated on error uses the response to extract the received status (status attribute). It would not be the best way to show an error, but it serves as an alternative for this small example.

conclusion

With this we finish this exercise in which we have seen the new standard of promises for Ajax requests that we use in the latest versions of angularjs. The truth is that it does not have any difficulty, so we understand that not much more explanation is needed to be able to start using it and adapt to the API of the new versions of this Javascript framework.