DELETE Restful method with angularjs $resource

问题

I'm attemping to call a RESTful method via $resource as following:

Resource:

angular.module('secure',['ngResource']).factory('Vehicle', function ($resource) {
  return $resource('/secure/vehicle/index', { id: '@id' }, {
    query: {
        method: 'GET',
        isArray: true
    },
    delete: {
        method: 'DELETE',
        isArray: false,
        url: '/secure/vehicle/delete/:id'
    }
  });
});

Then, from other service I inject the above factory and I call DELETE method in this way:

 factory.delete = function (procedureId) {
     var vehicle = new Vehicle();
     vehicle.$delete({id: procedureId}, function () {
             //success
             deferred.resolve();
         }, function (errResponse) {
             // fail
             console.log(errResponse);
         });
     return deferred.promise;
 };

(Don't pay attention to deferred things, it doesn't work with or without it) Unfortunately, I always get the same answer:

 Remote Address:127.0.0.1:8080
 Request URL:http://localhost:8080/secure/vehicle/delete/21
 Request Method:DELETE
 Status Code:422 Unprocessable Entity

The call itself is set up properly (secure/vehicle/delete/21). In fact, if I do the same, but instead of using $resource variable, using $http, everything works!

$http({
    'method': 'DELETE',
    'url': '/secure/vehicle/delete/' + procedureId,
    'headers': {
        'Content-Type': 'application/json'
    },
    'data': ""
})
    .success(function () {
        // success
    })
    .error(function (data, status) {
        console.log(data.errors);
    });

So, I guess something is missing in $resource-way, but what? Any help, it will be appreciated!

EDIT:

It seems it's a backend problem when it reads the entire url call. If I call DELETE resource, using $http, adding the data: "" as I show above, the backend initializes itself properly. But if I try the $resource-way, the required params are pre-configured and that doesn't like to the backend, so I need to find the way to say to $resource how to add something like data: "", any ideas?

回答1:

Test proof that it works:

angular.module('secure', ['ngResource']).factory('Vehicle', function($resource) {
  return $resource('/secure/vehicle/index', {
    id: '@id'
  }, {
    query: {
      method: 'GET',
      isArray: true
    },
    delete: {
      method: 'DELETE',
      isArray: false,
      url: '/secure/vehicle/delete/:id'
    }
  });
});

angular.module('secure').factory('VehicleFactory', function(Vehicle, $q) {
  var factory = {}

  factory.delete = function(procedureId) {
    var deferred = $q.defer();
    var vehicle = new Vehicle();
    vehicle.$delete({
      id: procedureId
    }, function(r) {
      deferred.resolve(r);
    }, function(errResponse) {
      console.log(errResponse);
    });
    return deferred.promise;
  };

  return factory;
});

describe('VehicleFactory', function() {

  var $httpBackend, VehicleFactory

  beforeEach(module('secure'));

  beforeEach(inject(function(_$httpBackend_, _VehicleFactory_) {
    $httpBackend = _$httpBackend_
    VehicleFactory = _VehicleFactory_
  }))
  

  it('deletes vehicle - vehicle.$delete()', function() {
    var r = {
      data: 'correct response'
    }
    
    $httpBackend.when('DELETE', '/secure/vehicle/delete/123').respond(r)
    
    VehicleFactory.delete(123).then(function(response) {
      expect(response.data).toBe(r.data)
    })
    
    $httpBackend.flush();
  });
  
  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation()
    $httpBackend.verifyNoOutstandingRequest()
  })

})

<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>

Some much cleaner way to write delete functionality without $q:

angular.module('secure').factory('VehicleFactory', function(Vehicle) {
  var factory = {}

  factory.delete = function(procedureId) {
    return (new Vehicle()).$delete({
      id: procedureId
    })
  }

  return factory;
});

来源：https://stackoverflow.com/questions/31315210/delete-restful-method-with-angularjs-resource

标签

angularjs

rest

angular-resource