AngularJS $http Service

The $http service in AngularJS is used to perform HTTP requests (e.g., GET, POST, PUT, DELETE) to interact with backend servers. It simplifies AJAX calls and provides support for promises to handle asynchronous data retrieval.

Key Features of $http

1. Supports all HTTP methods: Allows interaction with RESTful APIs.
2. Promise-based: Uses .then() for handling success and failure responses.
3. Configurable: Allows setting headers, parameters, and request bodies.
4. Interceptors: Enables pre/post-processing of requests and responses.

Syntax

$http({
  method: 'METHOD',
  url: 'URL',
  data: {}, // Optional: For POST/PUT requests
  params: {} // Optional: For query parameters
}).then(function successCallback(response) {
  // Handle success
}, function errorCallback(response) {
  // Handle error
});

 

Common HTTP Methods

1. GET Request

Fetches data from the server.

$http.get('/api/items').then(function(response) {
  $scope.items = response.data;
});

2. POST Request

Sends data to the server.

$http.post('/api/items', { name: 'NewItem' }).then(function(response) {
  $scope.message = "Item added successfully!";
});

3. PUT Request

Updates existing data on the server.

$http.put('/api/items/1', { name: 'UpdatedItem' }).then(function(response) {
  $scope.message = "Item updated successfully!";
});

4. DELETE Request

Deletes data on the server.

$http.delete('/api/items/1').then(function(response) {
  $scope.message = "Item deleted successfully!";
});

 

Configuring $http Requests

The $http service supports various configurations, such as headers and query parameters.

Example with Configurations

$http({
  method: 'GET',
  url: '/api/items',
  headers: { 'Authorization': 'Bearer token123' },
  params: { limit: 10, sort: 'asc' }
}).then(function(response) {
  $scope.items = response.data;
});

 

Handling Errors

The $http service allows handling errors using the .catch() method or the second parameter in .then().

Example:

$http.get('/api/items').then(
  function success(response) {
    $scope.items = response.data;
  },
  function error(response) {
    console.error("Error occurred: ", response.status);
  }
);

 

Using $http Interceptors

Interceptors allow you to modify requests or responses globally.

Example:

app.factory('myInterceptor', function() {
  return {
    request: function(config) {
      config.headers['Authorization'] = 'Bearer token123';
      return config;
    },
    responseError: function(rejection) {
      console.error('Error occurred:', rejection.status);
      return rejection;
    }
  };
});

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
});

 

Summary

The AngularJS $http service provides a simple yet powerful way to handle HTTP requests in web applications. With support for various methods, configurations, and interceptors, it enables seamless interaction with RESTful APIs and simplifies asynchronous data handling.