AngularJS $http Service

In modern web development, your frontend needs a reliable way to talk to a backend server. The $http service is a core AngularJS service that facilitates communication with remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

Think of $http as the messenger of your application: it takes your requests (like "Give me a list of users"), carries them to the server, and brings back the data you need to display. Because it is promise-based, it allows your application to remain responsive while waiting for the server to respond.

Key Features of $http

1. Comprehensive Method Support: It supports all standard HTTP actions—GET, POST, PUT, DELETE, and PATCH—making it perfect for RESTful APIs.
2. Automatic JSON Transformation: If the server returns JSON data, $http automatically transforms it into a JavaScript object for you.
3. Promise-Based Workflow: It uses the .then() pattern, allowing you to write cleaner asynchronous code compared to old-school callbacks.
4. Request/Response Interceptors: You can "catch" every request or response globally to add things like authentication tokens or log errors.

Syntax

The most flexible way to use $http is by passing a configuration object. This allows you to define the method, URL, data, and headers all in one place.

$http({
  method: 'GET',
  url: 'https://api.example.com/data',
  data: { id: 123 }, // Data to be sent as the request body
  params: { status: 'active' } // Query parameters (e.g., ?status=active)
}).then(function successCallback(response) {
  // 'response' is an object containing:
  // .data – The actual payload from the server
  // .status – HTTP status code (e.g., 200)
  // .headers – Header getter function
  // .config – The config object used to create the request
  console.log(response.data);
}, function errorCallback(response) {
  // This executes if the server returns an error code (4xx or 5xx)
  console.error("Request failed with status: " + response.status);
});

Common HTTP Methods

While the general configuration object is powerful, AngularJS provides shortcut methods for convenience.

1. GET Request

This is used to retrieve data. For example, fetching a list of products from a database to display in a table.

// Real-world: Fetching a list of products
$http.get('/api/products').then(function(response) {
  $scope.products = response.data;
});

2. POST Request

Use this when you want to send new data to the server, such as submitting a registration form or creating a new blog post.

// Real-world: Submitting a new user form
$http.post('/api/users', { username: 'jdoe', email: '[email protected]' })
  .then(function(response) {
    $scope.message = "User created with ID: " + response.data.id;
  });

3. PUT Request

This is typically used for updating existing records. It replaces the current representation of the target resource with the request payload.

// Real-world: Updating a user's email address
$http.put('/api/users/12', { email: '[email protected]' })
  .then(function(response) {
    alert("Profile updated successfully!");
  });

4. DELETE Request

As the name implies, this removes data from the server. Be careful, as this is usually permanent!

// Real-world: Removing an item from a shopping cart
$http.delete('/api/cart/item/405').then(function(response) {
  $scope.status = "Item removed.";
});

Configuring $http Requests

Real-world applications often require more than just a URL. You might need to send authentication tokens (like JWT) in the headers or specific query parameters for filtering and pagination.

Example with Configurations

$http({
  method: 'GET',
  url: '/api/orders',
  headers: { 
    'Authorization': 'Bearer my-secret-token',
    'Accept': 'application/json'
  },
  params: { 
    page: 1, 
    limit: 20,
    sort: 'desc' 
  }
}).then(function(response) {
  $scope.orders = response.data;
});

Handling Errors

In a perfect world, every request succeeds. In reality, servers go down, 404s happen, and users lose their internet connection. You should always provide feedback to the user when something goes wrong.

Example:

$http.get('/api/secure-data').then(
  function success(response) {
    $scope.data = response.data;
  },
  function error(response) {
    if (response.status === 401) {
        $scope.errorMessage = "You aren't authorized! Please log in.";
    } else if (response.status === 404) {
        $scope.errorMessage = "The requested data was not found.";
    } else {
        $scope.errorMessage = "An unexpected error occurred. Please try again later.";
    }
  }
);

Using $http Interceptors

Interceptors are like "middleware" for your HTTP requests. If you want to add an API key to every single request you make, you don't want to manually type it into every $http call. Instead, you can use an interceptor.

Example: Global Auth Header Interceptor

app.factory('authInterceptor', function() {
  return {
    // This runs before the request is sent to the server
    request: function(config) {
      config.headers['X-Access-Token'] = 'global-auth-key-123';
      return config;
    },
    // This runs if the server returns an error
    responseError: function(rejection) {
      if (rejection.status === 403) {
        console.warn('Access forbidden. Redirecting to login...');
      }
      return rejection;
    }
  };
});

// Register the interceptor in the app config
app.config(function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
});

Summary

The AngularJS $http service is a robust tool for handling data communication. By understanding how to use different HTTP methods, manage promises, and implement interceptors, you can build highly interactive, data-driven applications. Remember to always handle your errors gracefully and keep your API logic organized in services for the best results.