#13 – Fetching Data with $http Using GET

26 Sep by vichu

#13 – Fetching Data with $http Using GET

Reading Time: 4 minutes

The traditional way of making a request to the server from AJAX applications (using XMLHttpRequests) involves getting a handle on the XMLHttpRequest object, making the request, reading the response, checking the error codes, and finally processing the server response. It goes something like this:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
 var response = xmlhttp.responseText;
} else if (xmlhttp.status == 400) { // or really anything in the 4 series
 // Handle error gracefully
}
};
// Set up connection
xmlhttp.open("GET", "http://myserver/api", true);
// Make the request
xmlhttp.send();


This is a lot of work for such a simple, common, and often repeated task. More often than not, we will likely end up creating wrappers or using a library. $http is a core AngularJS service that allows us to communicate with server endpoints using XHR. The AngularJS XHR API follows what is commonly known as the Promise interface. Because XHRs are asynchronous method calls, the response from the server will come back at an unknown future date and time (hopefully almost immediately). The Promise interface guarantees how such responses will be dealt with, and allows consumers of the Promise to use them in a predictable manner.

See the Pen Github Api using $http by Vishal Srinivasan (@vishal_srini) on CodePen.0

In the above example I used github api and fetching the data from this url (https://api.github.com/users). You can see that I used just 3 lines to fetch data from server i.e., it is a way better that the traditional xhr request.

$http.get("https://api.github.com/users")
	.then(function(response){
    $scope.datas = response.data;
  })

What I given here? Its very simple to understand. Here I given the url that I need to fetch using $http.get and once the hit is complete there may be two responses, success or failure. I created an annonymous function here that gets called after success. The response is present inside the parameter that is given.

Now how to fetch an error?
I will give you a very basic way to fetch the error. See the below code.

function successFunction(response){
$scope.datas = response.data;
}

function errorFunction(reason){
alert('error!! This is a custom error side!!');
}

$http.get("https://api.github.com/users")
	.then(successFunction,errorFunction);

The above code is again the simplest of all. The first named function “successFunction” gets called whenever the hit is successful, whereas the “errorFunction” gets called when there are any error in fetching the data. Just change the url with any other (something like this “https://ap.github.com/users”) and check what happens.

This is the basic example of how to call an http request using angularjs. 🙂
In further blog post I will get into few more concepts in angularjs like promises, post request etc.



Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

Leave a Reply

Your email address will not be published. Required fields are marked *