What $http service does?
$http service makes a request to the server and returns a response.
$http service is a function that has a single argument i.e a configuration object which is used to generate an http request to the server and returns a response.
Generating a request to a specific URL using $http service
Now lets see how $http service generate a request to a specific URL.
as an example, lets think, we need to get all students data in a school management system. for that, we have a method in a ASP.NET Web service named, StudentService.asmx.
$http({
method: 'GET',
url:'StudentService.asmx/GetAllStudents'
});
in this example,
the $http service, makes a get request to the web service. It requests the data retrieved by GetAllStudents method in the mentioned WebService.
in the above example, we have only used two properties of the single configuration object. But there are many useful properties supported by the configuration object.
- params
- data
- headers
- eventHandlers
We can even use short cut methods to get,post, delete, put etc, with $http service. the below example is the usage of shortcut get() method for the above example.
$http.get('StudentService.asmx/GetAllStudents')
Getting the response of the request made
In order to the request made by the $http service, we cannot directly access the response data. Because it returns a promise object, which means the functions are executed asynchronously and data it returns are not accessible immediately. Therefore we cannot simply assign the made request to a $scope object as the result.
in order to receive the response, the then() method is used.When the request completes , the successCallBack function will be passed to the then() function as a parameter. Then the function receives a single object as the response, which has several properties.
$http.get('StudentService.asmx/GetAllStudents'')
.then(function(response) {
$scope.students= response.data;
});
now we can use the data property of the object to retrieve the data of students we requested.
Likewise,
if there is an error processed by the request, the errorCallback function is called.it is passed as the second parameter to then() function.the function will receive a single object that contains several properties. Using the data or statusText properties, we can find the reason for the error.
$http.get('StudentService.asmx/GetAllStudents'')
.then(function(response) {
$scope.students= response.data;
},
function(reason){
$scope.error=reason.data;
$log.info(reason);
}
});
we can use $log service to log the response object to the console to have a look on all of it's properties as shown below.
$http.get('StudentService.asmx/GetAllStudents'')
.then(function(response) {
$scope.students= response.data;
$log.info(response);
});
** when you use the developer tools, you can see the all the information of the response object in the console with it's properties.(press F12 to view the developer tools :) )
note: Logging objects to the console is very useful when u debugging Angular applications.
We can also create functions for successCallBack and errorCallBack separately and send it to the then() method as parameters.
var successCallBack = function(response){
$scope.students=response.data;
};
var errorCallBack = function(reason){
$scope.error=reason.data;
};
$scope.students=$http.get('StudentService.asmx/GetAllStudents'')
.then(successCallBack ,errorCallBack )
The response transformation
- if the response of this is data property contains a JavaScript object, it is automatically converted into JSON object.
- if the response is a JSON object , it is also automatically converted into a JavaScript object.
