Having difficulty in terminating the $resource request

Question

Having difficulty in terminating the $resource request

Despite attempting various solutions, such as the one mentioned in this thread, I am still unable to successfully cancel a request made using $resource. My latest attempt looks like this:

Controller:

angular.module('theApp')
  .controller('homeController', function ($q, foodTypeFactory) {
    var vm = this;

    vm.testButton = function () {
      vm.aborter = $q.defer();
      foodTypeFactory(vm.aborter).getTest({}, function (data) {
        console.log(data);
      });
    };
    vm.cancelButton = function () {
      vm.aborter.resolve();
    }
  });

foodTypeFactory:

angular.module('theApp')
  .factory('foodTypeFactory', function ($resource, BACKEND_API) {
    return function (aborter) {
      return $resource(BACKEND_API + '/api/foodtypes/:id', {id: '@id'}, {
        getTest: {
          timeout: aborter.promise
        }
      });
    }
  });

Even after trying to cancel the request, it still goes through and completes. I'm working with Angular version 1.6.2 and angular-resource 1.6.2.

What could be the issue here?

javascript angularjs angular-promise angular-resource ngresource

Answer 1

Answer №1

My recommendation to you is to implement an http interceptor, which allows you to intercept and control requests. Here's an example of how you can do this:

1) Start by creating a file named auth.interceptor.js:

"use strict";

angular
.module("demo")
.factory('authInterceptorService', ['$q', '$location', 'localStorageService',
function ($q, $location, localStorageService) {
    // Public Method
    return {
        request: function (config) {
            config.headers = config.headers || {};

           if(!MYCONDITION){ //<-- Add your logic here to determine if the request should be terminated
            return; //<-- TERMINATE IT ..
           }else{
            return config; //<-- CONTINUE WITH NORMAL REQUEST
           }


        }
    };
}]);

2) In your app.config.js file:

 $httpProvider.interceptors.push("authInterceptorService");

By adding this interceptor, the logic will be applied to all your requests made using $http or $resource. You can also include injection of the Bearer Token if needed.

I hope this information proves helpful for you.

Answer 2

My recommendation to you is to implement an http interceptor, which allows you to intercept and control requests. Here's an example of how you can do this:

1) Start by creating a file named auth.interceptor.js:

"use strict";

angular
.module("demo")
.factory('authInterceptorService', ['$q', '$location', 'localStorageService',
function ($q, $location, localStorageService) {
    // Public Method
    return {
        request: function (config) {
            config.headers = config.headers || {};

           if(!MYCONDITION){ //<-- Add your logic here to determine if the request should be terminated
            return; //<-- TERMINATE IT ..
           }else{
            return config; //<-- CONTINUE WITH NORMAL REQUEST
           }


        }
    };
}]);

2) In your app.config.js file:

 $httpProvider.interceptors.push("authInterceptorService");

By adding this interceptor, the logic will be applied to all your requests made using $http or $resource. You can also include injection of the Bearer Token if needed.

I hope this information proves helpful for you.

Answer 3

Answer №2

At last, a solution has been discovered! Starting from angular version 1.5, it is possible to terminate a $resource request using $cancelRequest(). This method was particularly useful in my specific situation:

Controller:

angular.module('theApp')
  .controller('homeController', function (foodTypeFactory) {
    var vm = this;

    vm.testButton = function () {
      vm.onGoingRequest = foodTypeFactory.getTest({}, function (data) {
        console.log(data);
      });
    };
    vm.cancelButton = function () {
       vm.onGoingRequest.$cancelRequest();
    }
  });

foodTypeFactory:

angular.module('theApp')
  .factory('foodTypeFactory', function ($resource, BACKEND_API) {
      return $resource(BACKEND_API + '/api/foodtypes/:id', {id: '@id'}, {
        getTest: {
          cancellable: true
        }
      });
  });

Answer 4

At last, a solution has been discovered! Starting from angular version 1.5, it is possible to terminate a $resource request using $cancelRequest(). This method was particularly useful in my specific situation:

Controller:

angular.module('theApp')
  .controller('homeController', function (foodTypeFactory) {
    var vm = this;

    vm.testButton = function () {
      vm.onGoingRequest = foodTypeFactory.getTest({}, function (data) {
        console.log(data);
      });
    };
    vm.cancelButton = function () {
       vm.onGoingRequest.$cancelRequest();
    }
  });

foodTypeFactory:

angular.module('theApp')
  .factory('foodTypeFactory', function ($resource, BACKEND_API) {
      return $resource(BACKEND_API + '/api/foodtypes/:id', {id: '@id'}, {
        getTest: {
          cancellable: true
        }
      });
  });

Having difficulty in terminating the $resource request

Answer №1

Answer №2

Similar questions

How to extract a property name from an object in JavaScript without using quotation

Guide on correctly accessing an attribute in AngularJS directive validators

Modifying data on the fly in Angular

Tips for preventing countdown from resetting when you refresh the page

Transform one column into several columns

Automatic Clicks in the Chrome Console

Troubleshooting React Testing Library: Input Field Fails to Update Value During Testing

Retrieve the sibling files of a newly created file within a Firebase Cloud Function that is triggered by the onFinal

Establish a callback function for opening a fresh window using JavaScript

Differences between AsyncData and nuxtServerInit

A method for cycling through parent and child objects in JavaScript (Vue.js) and storing them in an array - how to

Generating an Array of objects through the use of the each method

Understanding the distinctions among variables in typescript

Mastering the Rejection of Promises in Javascript with Graceful Elegance

Can anyone guide me on how to retrieve a popup validation message on a webpage using Selenium with Python?

Verifying a user's initial visit status using COOKIES in a Servlet

Positioning JQuery tooltips

Using a JavaScript variable within an Angular component: a step-by-step guide

jQuery is producing an incorrect HTML string that includes `="` instead of just `"`

Instructions on utilizing sockets for transmitting data from javascript to python