How can I replace $resource with $http in AngularJS? - javascript

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 ?

$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.

$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.
});

Related

Make Synchronous call with $resource in angularjs

I am new to angularjs.After creating some projects with restful web service I got stuck at some point.So please help to me to solve that issues.
I have read the difference between $resource and $http from AngularJs $resource vs $http
My issue is that as I am using $resource the data come asynchronously
e.g. if I am saving any data and transfer to detail page that data I got is not updated and if I will wait for some time than I will get newly data.
So I need to go on $http or is there any other way to make call synchronously.
I have also try with $promise but it doesn't solve my issue.
This is how I use $resource
in controller:
var promise = Service.queryItem();
promise.then(function(response){
// just adding my response items to an array
angular.forEach(response, function(item){
$scope.items.push(item);
});
}, function(reason){
console.log(reason);
});
In service
this.queryItem = function (){
var deferred = $q.defer();
setTimeout(function() {
// deferred.notify('Saving data..');
var items = Items.query({},function() {
deferred.resolve(items.d.results);
}, function(error){
deferred.reject(error);
});
}, 1000);
return deferred.promise;
};
In $resource factory:
// just a snippet from my factory
query: {
method: 'GET',
headers: { "Accept": "application/json; odata=verbose" },
url: "RequestURL"
},
As some comments stated, the use of promise will make it run in the desired order , as you can see I do my forEach after .then

Apply scope to promise .then() functions from service

I'm new to AngularJS.
I'm calling a service from a controller that is communicating with a webservice. the service returns a promise to the controller. Now I want to apply the data that is available on the success function of the promise to $scope. How can I achieve this? I already tried to do $scope.$apply() on the service call or the promise success function, but this just gives me errors.
Controller:
angular.module('home')
.controller('HomeCtrl',
['$scope', 'myService',
function ($scope, myService) {
$scope.data = [];
$scope.getData = function () {
// this is triggered via btn click
myService.getSomeData(reqData)
.then(
function success(res){
// apply res.data to $scope.data ?
},
function failure(err){
//error handling
}
);
}
}]);
Service:
angular.module('myService')
.factory('myService', ['$http', '$rootScope',
function ($http, $rootScope) {
return {
generalWebServiceProxy: function (webserviceName, data, xml) {
// do some xml stuff, settings header etc
return $http({
method: 'POST',
url: URL,
headers: headers,
data: data
});
},
getSomeData: function (data) {
return this.generalWebServiceProxy('WSName', data, true).then(/* do something here and return data*/);
}
}
}]);
Thanks in advance!
$http returns a promise where the server response is resolved. That response object contains things like status, data, header, etc.. etc...
Your service should handle these responses itself. So that the method setSomeData resolves to that data. Right now, it's resolving to the server response which isn't very useful for your directive.
generalWebServiceProxy: function (webserviceName, data, xml) {
// this method is return a promise
return $http({...});
},
// this method uses "promise chaining"
getSomeData: function (data) {
return this.generalWebServiceProxy(
'WSName',
data,
true).then(function(response) {
if(response.status == 200) {
return response.data;
}
throw new Error("Unexpected response:"+response.status);
});
}
In the above code I've done something called promise chaining. That's where the return value of a then mutates the resolve value. So the next promise then call will have response.data as the parameter.
Later in your directive you can use the promise returned by the service as a regular promise. It just resolves to the data in the response.
$scope.getData = function () {
myService.getSomeData(reqData)
.then(function success(data) {
// ^^ data is actually the value `response.data` from the service
});
}
What about error handling?
There are two kinds of errors with $http. There are HTTP errors like unable to resolve host, failure to connect or timeouts, and then there are response errors. Such as content missing or content not found. Some of these can be handled with the promise failure callback, and some are successful responses that you don't want.
So in my example I restrict success to mean an HTTP 200 response. You might want to check that the data given back is what you were expecting (for example, is it an array?).
I've found it better to handle errors using a HTTP interceptor. Otherwise you have to implement error handles in every directive that uses the service.
$http is a promise and over here you not returning the promise and using it as a promise in the controller.
Modified Service:
angular.module('myService')
.factory('myService', ['$http', '$rootScope',
function ($http, $rootScope) {
return {
generalWebServiceProxy: function (webserviceName, data, xml) {
// do some xml stuff, settings header etc
return $http({
method: 'POST',
url: URL,
headers: headers,
data: data
});
},
getSomeData: function (data) {
return this.generalWebServiceProxy('WSName', data, true);
}
}
}]);
And have the controller as is and update the $scope variable within success block.

Angular $scope not available outside my function

Somewhat new to Angular and javascript. I have the following controller written use a factory service to access a local JSON file. Most of this code is derived (or completely taken) from this post by Dan Wahlin. I am unable to access the $scope.books variable outside of the function and cannot figure out why. The console.log inside the function gives me the object I am looking for, but the one outside returns undefined. What am I doing wrong here? Thanks.
app.controller('FormController', ['$scope', 'tocFactory', function ($scope, tocFactory) {
$scope.books;
getBooks();
function getBooks() {
tocFactory.getBooks().
success(function(data, status, headers, config) {
$scope.books = data;
console.log($scope.books);
}).
error(function(data, status, headers, config) {
// log error
})
}
console.log($scope.books);
}]);
Because you are making an ajax and then executing the next line of code. Which doesn't mean you have guarantee that your ajax response is ready on execution of next line of code.
You could always gets its response value inside the success function of $http which gets called when ajax call executed successfully.
Read here How asynchronous call works?
actually this isn't an issue of scope, but timing. The getBooks function is executed asynchronously, so when your console log happens it most likely will not have been bound to anything. You could test this easily with interval to see how this is happening:
app.controller('FormController', ['$scope', 'tocFactory', function($scope, tocFactory) {
$scope.books;
getBooks();
function getBooks() {
tocFactory.getBooks()
.success(function(data, status, headers, config) {
$scope.books = data;
console.log($scope.books);
})
.error(function(data, status, headers, config) {
// log error
})
}
setInterval(function(){
console.log($scope.books);
}, 1000);
}]);
You can use $q service to handle asynchronous code with promises :
app.controller('FormController', ['$scope', '$q', 'tocFactory', function ($scope, $q, tocFactory)
{
var getBooks = function()
{
var deferred = $q.defer();
tocFactory.getBooks().
success( function(data, status, headers, config)
{
$scope.books = data;
deferred.resolve();
} ).
error( function(data, status, headers, config)
{
deferred.reject();
} );
return deferred.promise;
};
getBooks().then( function(res)
{
console.log($scope.books); // success : your data
}, function(res)
{
console.log($scope.books); // error : undefined
} );
console.log($scope.books); // undefined
} ] );
I haven't tested this code but it should work and show you promises principle.
More about $q service : https://docs.angularjs.org/api/ng/service/$q

AngularJS provide success callback of a factory method

I have a simple factory that returns a promise after a async.-request.
getUpdates: function(){
var q = $q.defer();
$http.get(...)
.success(function(data, status, headers, config) {
q.resolve(data);
})
.error(function(data, status, headers, config) {
q.reject(status);
});
return q.promise;
}
In my controller I just call the getUpdates-method and receive the promise.
var updates = factory.getUpdates();
How can I provide a success/error functionality of the getUpdates method?
factory.getUpdates().success(function(promise){...}).error(function(err)...
What do I have to add to my getUpdates function?
The $http service already return a promise, there is no need to use $q.defer() to create an another promise in this case. You could just write it like this:
getUpdates: function () {
return $http.get(...);
}
This way the success() and error() methods will still be available.
Or if you really have a reason why you are using $q.defer(), please include it in the question.
You then function to handle the success and failure of the promise:
factory.getUpdates()
.then(function(value) {
// handle success
}, function(reason) {
// handle failure
});
factory.getUpdates().then(
//onSucess
function(response)
{
// ...
},
//onError
function()
{
// ...
}
);

Overwriting angular $resource function

I'm trying to overwrite the query()-method of AngularJS $resource with a custom $http-GET. However, it doesn't seem to overwrite the result of the operation. It returns an object with method, data and headers, not data.rows[].
angular.module('couchdb', ['ngResource']).
factory('Project', function($resource, $http) {
var Project = $resource('http://couchdb/mydb', {}, {
'update': { method: 'PUT' },
'query': {method:'GET', isArray: false}
}
);
Project.query = function() {
return $http({method: 'GET', url: 'http://couchdb/mydb/_design/projects/_view/index'}).
success(function(data, status, headers, config) {
return data.rows;
}).
error(function(data, status, headers, config) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
return Project;
});
How can I only get the rows of the result for the resource?
ngResources don't need to rely on the $http service. You don't need to be redefining the Project.query function - as you've already indicated it as an action of the Project $resource (in addition to it being included by default).
This means that the Project.query function is ready to go, and does not need re-definition. You can literally just do Project.query() to get results. It supports callbacks for success/failure, so Project.query({}, successCallback, failureCallback) will submit no arguments, and give you access to the returned data.
I suggest you read the AngularJS $resource documentation carefully, as they provide plenty of good examples. A basic example is also included in Step 11 of the Angular Tutorial.

Categories