Steps for canceling a promise using $resource in AngularJS version 1.5

Question

Steps for canceling a promise using $resource in AngularJS version 1.5

I am currently using angular 1.5.7 and I am facing an issue where a delete operation on a resource is taking too long to complete. I am working with a MEAN stack and there are times when the delete operation appears to be pending, making me wonder if MongoDB is causing the delay. Here is the code snippet for the factory and the controller where the delete function is being called: * Factory:

      .factory('addressesFactory', ['$resource', 'baseURL', function ($resource, baseURL) {
    return $resource(baseURL + 'addresses/:id', {id: '@_id'}, {
      'update': {
        method: 'PUT'
      },
      'delete': {
        method: 'DELETE'
      }
    });
  }])

Controller snippet:

$scope.delete = function (address, addressesList) {

$scope.deleteDisabled=true;

console.log('[ModeratorsCtrl] Deleting:' + address.name);
console.log('[ModeratorsCtrl] ' + addressesList.length);
addressesFactory.delete({id: address._id}).$promise.then(
  function (response) {
    $scope.deleteDisabled=false;
    console.log('[ModeratorsCtrl] Address deleted successfully');
  },
  function (response) {
    $scope.deleteDisabled=false;
    var message = '[ModeratorsCtrl] Error: ' + response.status + ' ' + response.statusText;
    console.log(message);
  }
);

};

I came across this post How to cancel $resource requests where they talk about cancelling requests using $cancelRequest() from AngularJS ngResource service, but I am somewhat confused about it. Can someone provide insights into the best practices for cancelling promises in my implementation? Regards,

javascript angularjs

Answer 1

Answer №1

If your resource is called Users, and you want to cancel the request, make sure to name your action appropriately.

var request = Users.query();

Once you have defined this request, it becomes a promise. To cancel it, all you need to do is,

request.$cancelRequest();

You can then successfully cancel the request.

Answer 2

If your resource is called Users, and you want to cancel the request, make sure to name your action appropriately.

var request = Users.query();

Once you have defined this request, it becomes a promise. To cancel it, all you need to do is,

request.$cancelRequest();

You can then successfully cancel the request.

Answer 3

Answer №2

Appreciate the assistance! Here's what I implemented in my factory:

  .factory('addressesFactory', ['$resource', 'baseURL', function ($resource, baseURL) {
    return $resource(baseURL + 'addresses/:id', {id: '@_id'}, {
      'update': {
        method: 'PUT'
      },
      'delete': {
        method: 'DELETE',
        cancellable: true
      }
    });
  }])

And then in my controller:

 $scope.delete = function (address, addressesList) {
    $scope.deleteDisabled = true;//prevent multiple click

    var deleteRequest = addressesFactory.delete({id: address._id});
    deleteRequest.$promise.then(
      function (response) {
        $scope.deleteDisabled = false;
        console.log('[ModeratorsCtrl] Address deleted successfully');
      },
      function (response) {
        $scope.deleteDisabled = false;
        var message = '[ModeratorsCtrl] Error: ' + response.status + ' ' + response.statusText;
        console.log(message);
      }
    );

    $timeout(function () {//2 seconds then cancel the promise
      if ($scope.deleteDisabled === true) {
        console.log('[ModeratorsCtrl] Cancel ...');
        deleteRequest.$cancelRequest();
        $scope.deleteDisabled = false;
      }
    }, 2000);
  };

I believe this approach aligns with best practices. Any feedback is welcome!

Answer 4

Appreciate the assistance! Here's what I implemented in my factory:

  .factory('addressesFactory', ['$resource', 'baseURL', function ($resource, baseURL) {
    return $resource(baseURL + 'addresses/:id', {id: '@_id'}, {
      'update': {
        method: 'PUT'
      },
      'delete': {
        method: 'DELETE',
        cancellable: true
      }
    });
  }])

And then in my controller:

 $scope.delete = function (address, addressesList) {
    $scope.deleteDisabled = true;//prevent multiple click

    var deleteRequest = addressesFactory.delete({id: address._id});
    deleteRequest.$promise.then(
      function (response) {
        $scope.deleteDisabled = false;
        console.log('[ModeratorsCtrl] Address deleted successfully');
      },
      function (response) {
        $scope.deleteDisabled = false;
        var message = '[ModeratorsCtrl] Error: ' + response.status + ' ' + response.statusText;
        console.log(message);
      }
    );

    $timeout(function () {//2 seconds then cancel the promise
      if ($scope.deleteDisabled === true) {
        console.log('[ModeratorsCtrl] Cancel ...');
        deleteRequest.$cancelRequest();
        $scope.deleteDisabled = false;
      }
    }, 2000);
  };

I believe this approach aligns with best practices. Any feedback is welcome!

Steps for canceling a promise using $resource in AngularJS version 1.5

Answer №1

Answer №2

Similar questions

Is it time to use the JavaScript preload() function?

What is the best way to integrate Greensock CustomEase with TypeScript?

The issue of `Console.log` displaying as undefined arises after subscribing to a provider in Ionic3

"Utilizing Object.call() in JavaScript for inheritance yields an undefined result

Generating a New Form in AngularJs Dynamically from a Separate Input

Error encountered during Next.js project build: Entry point specified for implicit type library 'build'

Could you explain the purpose of the app.use(cors()) function call?

Steps to access a unique custom drop-down menu in an upward direction

Is it a mistake? Using React and ES6 without Babel may not be the

Tips for initiating a browser file download using JavaScript, ensuring that the download is only carried out if the web service responds with

Is there a way to hide the thumbnail image when the title is hovered over without using CSS?

Empty Array result from push operations during Node.js/Express GET request

What is the best way to switch focus to the next input using jQuery?

The functionality of onClick and console.log seems to be malfunctioning on Nextjs

What is the best way to pass parameters from a Spring controller to an AngularJS module for rendering on a JSP page?

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

Clearing all data in a form upon opening

The behavior of the Bootstrap toggle with a chevron varies between the production environment and the local

What is the best way to retain the leading zeros when creating a new Number() in JavaScript?

Exploring Laravel's method for retrieving data from multiple tables in the controller