Example for Stackoverflow. Cancel $resource

by Stepan Kasyanenko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-resource.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <button ng-click="vm.start()">
      Start Request
    </button>
    <button ng-click="vm.cancel()">
      Cancel Request
    </button>
    <div ng-repeat="req in vm.request">
      <pre>{{$index}}: status = {{req.status}} statusText = {{req.status==-1?"Cancelled":req.statusText}}</pre>
    </div>
  </div>
</div>

CSS

.error {
  color: red;
  font-style: italic;
}

JavaScript

angular.module('ExampleApp', ['ngResource'])
  .controller('ExampleController', function(ExampleService) {
    var vm = this;
    //Массив для отображения информации о запросах
    vm.request = [];
    vm.start = function() {
      vm.cancel(); //Отменяем предыдущий запрос
      ExampleService.getData(1).$promise
        .then(function() {
          console.log('success');
        })
        .catch(function(data) {
          console.log('catch', data);
          vm.request.push(data);
        });
    };
    vm.cancel = function() {
      if (ExampleService.getData.$promise)
        ExampleService.getData.$promise.$cancelRequest();
    };
  })
  .service('ExampleService', function($resource) {
    var Example = $resource("/data/:id", {
      id: "@id"
    }, {
      // Let's make the `query()` method cancellable
      query: {
        method: 'get',
        isArray: true,
        cancellable: true
      }
    });
    return {
      getData: function(id) {
        // Сохраняем промис для отмены
        this.getData.$promise = Example.query({
          id: id
        });
        return this.getData.$promise;
      }
    }
  });