The Difference Between Angular's $http and $resource Services
I tend to stick with the $http service as it works well and has no suprises. But, I can see the allure of the $resource service. Here's a really brief demo.
These two services accomplish the same job: send and retrieve data from an API.
And they both return a promise. So, why would you choose one over the other?
$http [documentation]
Here’s a quick example of how you might use the $http
service:
var users; // A place to store our data
// Setup the request.
var myHttpPromise = $http.get('users');
// Call the request.
myHttpPromise.then(function(response) {
// Handle the response.
users = response.data;
});
If our API returns an Array of users then we are all set. If we want to do something when there’s an error we’ll need to handle the promise a bit differently.
myHttpPromise.success(function(response) {
users = response.data;
}).error((reason) {
console.log(reason);
});
We could accomplish the same thing like this:
myHttpPromise.then(function(response) {
users = response.data;
}, function(reason) {
console.log(reason);
});
And because this is a promise, it’s “thenable” - meaning you can chain more requests in sequence:
myHttpPromise.then(function(response) {
users = response.data;
}, function(reason) {
console.log(reason);
}).then(function() {
// Do something else
})
$resource [documentation]
Here’s a quick example of how you might user the $resource
service:
var MyResource = $resource('/users/:userId', { userId:'@userId' });
var getUser = function (userId) {
return MyResource.get({ userId: userId }).$promise;
}
MyResource
is defined once and can be used throughout your controller/service to get
, save
, update
, query
, remove
and delete
. The nice thing about the $resource
is that it has all of the convenience methods built in. The downside is you have to define your parameters upfront.
Here’s a demo showing both methods.
See the Pen $resource vs. $http - to the death! by Ken Howard (@kenhowardpdx) on CodePen.