如何在AngularJS中用$ http替换$ resource？

Question

My application has the following $resource calls. From what I can see this could be replaced with $http.

    $resource('/api/:et/', { et: $scope.data.entityType })
        .save(data, newSuccess, error)
        .$promise.finally(last);

    $resource('/api/:et/:id', { et: $scope.data.entityType })
        .delete({ id: entityId }, deleteSuccess, error)
        .$promise.finally(last);

    $resource('/api/:et/:id', { et: $scope.data.entityType }, { update: { method: 'PUT' } })
        .update({ id: entityId }, data, editSuccess, error)
        .$promise.finally(last);

I have checked the $http documentation but I cannot see how to add the calls to the xxxSuccess, error functions and how to do the .$promise.finally(last).

Can someone explain how I could replicate this functionality using $http ?

Answer 1

$http is for general purpose AJAX . In most cases this is what you'll be using. With $http you're going to be making GET , POST , DELETE type calls manually and processing the objects they return on your own.

$resource wraps $http for use in RESTful web API scenarios.

---

Syntax

$http({
    method : 'GET',
    url : '/someUrl',
    param : { paramKey : paramValue}, // optional
    headers : 'someHeaders' // optional
    }).success(function(data, status, headers, config)
    {   
    // this callback will be called asynchronously
    // when the response is available
    }).error(function(data, status, headers, config)
    {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    });

---

$http Documentation - https://docs.angularjs.org/#!/api/ng/service/$http

---

Maintaing Promise in $http

app.factory('myService', function($http) {
      var myService = {
        async: function() {
          // $http returns a promise, which has a then function, which also returns a promise
          var promise = $http.get('/someUrl').then(function (response) {
            // The then function here is an opportunity to modify the response
            console.log(response);
            // The return value gets picked up by the then in the controller.
            return response.data;
          });
          // Return the promise to the controller
          return promise;
        }
      };
      return myService;
    });

    app.controller('MainCtrl', function( myService,$scope) {
      // Call the async method and then do stuff with what is returned inside our own then function
      myService.async().then(function(d) {
        $scope.data = d;
      });
    });

Take a look at this article Angular Promises , It will definitely benifit you in acheving such scenerios.

Answer 2

$resource is a further abstracted version of $http. If you are already using $response you may find it's not useful to change your logic to use $http. That said -

https://docs.angularjs.org/api/ng/service/$http

General usage The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise with two $http specific methods: success and error.

$http({method: 'GET', url: '/someUrl'}).
    success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
}).
error(function(data, status, headers, config) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
});