How to cancel an ongoing API request

In AngularJS, you can cancel an ongoing API request by using the $http service along with a $q promise and $http cancellation mechanism. This allows you to abort an API call if necessary, such as when a user navigates away from a page or performs another action that makes the request irrelevant.

To achieve this, AngularJS provides a $http cancellation mechanism using the cancel property of a $q.defer object, which can be used to abort an ongoing request.

Steps to Cancel an Ongoing API Request

1. Create a Cancellation Token using $q.defer()

You can create a cancellation token with $q.defer(). This object will contain a promise and a cancel function that can be used to cancel the request.

2. Attach the Cancel Token to the $http Request

You attach the cancel token to the $http request. When the request is made, if the cancel function is triggered, the request will be aborted.

3. Trigger Cancellation When Needed

You can call the cancel() method on the cancellation token whenever you want to cancel the request.

Example: Implementing Cancelable API Requests

Step 1: Create a Cancel Token

angular.module('myApp', [])
  .controller('ApiController', function($scope, $http, $q) {
    let canceler; // To store the canceler for later cancellation

    // Function to initiate an API request
    $scope.fetchData = function() {
      // Create a new cancellation token each time a new request is made
      canceler = $q.defer();

      $http({
        method: 'GET',
        url: '/api/data',
        timeout: canceler.promise // Attach the canceler to the request
      })
      .then(function(response) {
        // Handle successful response
        console.log('Data fetched:', response.data);
      })
      .catch(function(error) {
        if (error.status === -1) {
          // Request was canceled
          console.log('Request was canceled');
        } else {
          // Handle other errors
          console.error('Failed to fetch data:', error);
        }
      });
    };

    // Function to cancel the ongoing request
    $scope.cancelRequest = function() {
      if (canceler) {
        canceler.resolve(); // Trigger the cancelation of the request
      }
    };
  });

Step 2: Triggering Cancellation

In the above example, we create a new cancellation token (canceler) every time a new API request is made. You can trigger the cancellation by calling the cancelRequest() method. This will resolve the cancellation promise and abort the request.

<div ng-app="myApp" ng-controller="ApiController">
  <button ng-click="fetchData()">Fetch Data</button>
  <button ng-click="cancelRequest()">Cancel Request</button>
</div>

Explanation:

1. Creating the Cancel Token (canceler):
   • We use $q.defer() to create a cancelable promise. The canceler object has a promise that is passed as the timeout option in the $http request configuration. This promise is used to cancel the request if needed.
2. Making the HTTP Request:
   • The $http request is made with the timeout option set to canceler.promise. This links the cancellation promise to the request.
3. Cancelling the Request:
   • The cancelRequest() method calls canceler.resolve(), which triggers the cancellation of the ongoing request. Once canceled, the request’s .catch() block will execute, and you can check if the request was canceled using error.status === -1.
4. Handling Canceled Requests:
   • When a request is canceled, the error.status will be -1, and you can handle it separately (as shown in the .catch() block).

4. Use Case Scenarios

• User Navigation: If a user navigates away from the page before the API call completes, you might want to cancel the request to avoid unnecessary data loading.
• Multiple Requests: When multiple API requests are being made, and one of them is no longer needed (e.g., when switching tabs or filters), you can cancel previous requests to save resources and prevent outdated data from being processed.
• Search Suggestions: In scenarios like search suggestion (autocomplete), you can cancel the previous request when a new search term is entered before the previous request finishes.

5. Handling Cancellations Properly

• Timeout Handling: If the cancellation promise resolves, $http will reject the promise with a status of -1. Be sure to handle this properly in your error handling.
• Multiple Cancellations: If multiple requests are issued, each will have its own cancellation token. This ensures that only the relevant request is canceled.