I want to result of my $http.get from my service to my controller.
myserviceSample.js
function messagesService($q,$http){
var messages;
$http({
method: 'GET',
url: 'http://api.com/feedback/list'
})
.then(function success(response){
messages = response.data;
console.log(messages);
},function error(response){
console.log('error'+ response);
});
console.log(messages);
return {
loadAllItems : function() {
return $q.when(messages);
}
};
}
})();
mycontrollerSample.js
function MessagesController(messagesService) {
var vm = this;
vm.messages = [];
messagesService
.loadAllItems()
.then(function(messages) {
console.log(messages);
vm.messages = [].concat(messages);
});
}
})();
The above code results gives undefined output.
What i miss?
$q.when object does expect promise/object to make it working. In your case you have to pass promise object to $q.when as you are doing $http.get call. Here messages object doesn't hold promise of $http.get, so you could change the implementation of method like below.
Service
function messagesService($q,$http){
var messages = $http({
method: 'GET',
url: 'http://api.com/feedback/list'
})
.then(function success(response){
return response.data;
},function error(response){
return $q.reject('Error Occured.');
});
return {
loadAllItems : function() {
return $q.when(messages);
}
};
}
Then controller will resolve that promise & .then will do the trick
function MessagesController(messagesService) {
var vm = this;
vm.messages = [];
messagesService
.loadAllItems()
.then(function(messages) {
console.log(messages);
vm.messages = [].concat(messages);
});
}
Note: Using $q to create a custom promise, is considered as bad pattern when you have $http.get method there(which does return
promise itself)
Improved Implementation
function messagesService($q, $http) {
var messages, getList = function() {
return $http({
method: 'GET',
url: 'http://api.com/feedback/list'
})
.then(function success(response) {
messages = response.data
return response.data;
}, function error(response) {
return $q.reject('Error Occured.');
});
};
return {
loadAllItems: function() {
if (!data)
return getList(); //return promise
else
return $q.resolve(messages); //return data
}
};
};
Related
I have an angularjs factory like this:
'use strict';
angular.module('frontRplApp')
.factory('paymentService', function ($rootScope, $http, config, tools) {
var urlBase = config.baseUrl;
var paymentService = {
response: {},
create: function () {
var args = {};
return $http.post(urlBase + 'api/investor/payment/create', args);
}
});
And I intend to use it inside a controller like this (the important issue is being to do something different if all went well or if there was an error)
$scope.order = function () {
console.log('PaymentCashCtrl.order');
$scope.disabledButtons.submitCashOrder = true;
paymentService.create()
.then(
function (response) {
// do something with response
}, function (error) {
// do something with an error
}));
};
However my issue is that Id like to update some of the paymentService fields as the response of the $http.post is resolved and then return the promise so that the function(response) and function(error) callbacks in the controller keep working.
I tried with something like:
return $http.post(urlBase + 'api/investor/payment/create', args)
.then(function(response){
console.log(response);
this.response = response;
return response;
});
But it doesnt work since the function(error) handler in the controller is never called.
I want to use my handlers in the controller but also make some updates when the $http.post response is resolved.
Thanks.
in the factory, you need to return the functions paymentService object. also, don't resolve the promise inside the factory. resolve it in the controller.
.factory('paymentService', function($rootScope, $http, config, tools) {
var urlBase = config.baseUrl;
var paymentService = {
response: {},
create: function() {
var args = {};
return $http.post(urlBase + 'api/investor/payment/create', args);
}
}
return paymentService;
});
$scope.order = function() {
console.log('PaymentCashCtrl.order');
$scope.disabledButtons.submitCashOrder = true;
paymentService.create()
.then(
function(response) {
// do something with response
},
function(error) {
// do something with an error
}));
};
Use $q
Change your factory code to this:
angular.module('frontRplApp')
.factory('paymentService', function ($rootScope, $http, config, tools, $q) {
var urlBase = config.baseUrl;
var paymentService = {
response: {},
create: function () {
var deferred = $q.defer();
var args = {};
$http.post(urlBase + 'api/investor/payment/create', args)
.then(function(response){
console.log(response);
paymentService.response = response;
deferred.resolve(response);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
}
};
return paymentService;
});
I am using promise and $q to make an asynchronous call. But it doesn't work.
eventData.js
angular.module('eventsApp').factory('eventData' , function($http ,$q, $log) {
return {
getEvent : function() {
var deferred = $q.defer()
$http({method: 'GET', url: 'http://localhost:8080/springhibernateangularjs/service/events'}).
then(
function(response){
deferred.resolve(response.data);
console.log("succccccc");
},
function(error){
console.log("faiiiiiiil");
deferred.reject(status);
});
return deferred.promise ;
}
};
});
EventContrller.js
$scope.event = eventData.getEvent();
But $scope.event is not loading correctly!
This is how you get the data since you are returning a promise not the results:
eventData.getEvets().then(function(result){
$scope.event = result;
})
There is no need to manufacture a promise with $q.defer as the $http service already returns a promise.
app.factory('eventData' , function($http) {
return {
getEvent : function() {
//RETURN http promise
return $http.get('http://localhost:8080/springhibernateangularjs/service/events').
then(function(response){
console.log("succccccc");
//return to chain data
return response.data;
},
function(error){
console.log("faiiiiiiil");
//throw to chain rejection
throw error;
});
}
};
});
In the controller:
eventData.getEvent().then(function(data){
$scope.event = data;
});
I have an AngularJS service method that should return a promise. Within that method is an async call which proceed to do an $http call on success. I am not quite getting the syntax right to return this correctly.
// This function should return a promise
function doFacebook() {
var deferred = $q.defer();
Facebook.login(function(response) {
var p = $http({
method: 'POST',
url: '/auth/facebook',
data: {
token: response.authResponse.accessToken
}
});
p.then(function(data) {
startSession(data);
return data;
}, function(data) {
return $q.reject(data);
});
});
return deferred.promise;
}
I am wanting to return p - not sure how to either attach/replace deferred with it.
You could just resolve deferred object with the promise p returned by the http call inside the facebook login callback. it should resolve/reject the passed-in promise automatically.
function doFacebook() {
var deferred = $q.defer();
Facebook.login(function(response) {
var p = $http({
method: 'POST',
url: '/auth/facebook',
data: {
token: response.authResponse.accessToken
}
}).then(function(data) {
startSession(data);
return data;
}, function(data) {
return $q.reject(data);
});
//Here
deferred.resolve(p);
});
return deferred.promise;
}
A sample demo:-
///BAD CODE ALERT!!
angular.module('app', []).controller('ctrl', function($scope, $q, $http, $timeout) {
function doAsync() {
var deferred = $q.defer();
//Simulating non angular async
setTimeout(function() {
//Simulating http call. $timeout also returns a promise, so.
var p = $timeout(function() {
//uncomment to test reject scenario
if ($scope.reject) {
$scope.reject = false;
throw Error("OOPS i got rejected");
}
return 'Hello, i got resolved!!'
}).then(function(data) {
return data;
}, function(data) {
return $q.reject(data.message);
});
//Here
deferred.resolve(p);
});
return deferred.promise;
}
$scope.runTest = function() {
doAsync().then(function(data) {
$scope.data = data;
}).catch(function(error) {
$scope.data = error;
});
}
$scope.rejectTest = function() {
$scope.reject = true;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-click="rejectTest()">Reject and then</button>
<button ng-click="runTest()">Run Test</button>
<div>{{data}}</div>
</div>
I have 3 JSON web services which I should use in my application,
I use $http to load from URL, my code is :
$http.get('http://{url}/users')
.then(function (result) {
storeUsers(result);
});
$http.get('http://{url}/news')
.then(function (result) {
storeNews(result);
});
$http.get('http://{url}/pages')
.then(function (result) {
storePages(result);
});
var users = getUsers();
Problems :
1- all $http run together not wait until the previuse $http done.
2- var users = getUsers(); will run before $http done.
UPDATE :
I changed my code to :
var loadedService = {
users: false,
news: false,
pages: false
};
function getUsers() {
deferred = $q.defer();
$http.get('http://{url}/users')
.then(function (result) {
loadedService.users = result;
deferred.resolve('I got users');
console.log("Get users");
});
return deferred.promise;
}
function getNews() {
deferred = $q.defer();
$http.get('http://{url}/news')
.then(function (result) {
loadedService.news = result;
deferred.resolve('I got news');
console.log("Get news");
});
return deferred.promise;
}
function getPages() {
deferred = $q.defer();
$http.get('http://{url}/pages')
.then(function (result) {
loadedService.pages = result;
deferred.resolve('I got pages');
console.log("Get pages");
});
return deferred.promise;
}
getNews().then(getUsers()).then(getPages()).then(function () {
console.log('Done !');
});
When I run my program, I will see :
XHR finished loading: GET "http://{url}/pages". ionic.bundle.js:16185
Get pages sync.js:133
XHR finished loading: GET "http://{url}/users". ionic.bundle.js:16185
Get users sync.js:56
XHR finished loading: GET "http://{url}/news". ionic.bundle.js:16185
Get news sync.js:107
as you can see, first of all pages service loaded, then users service and then news, while in my code I said getNews().then(getUsers()).then(getPages()).
and finally console.log('Done !'); don't show !
You can use one of the ways MajoB or Muhammad suggested or you can have 3 functions that return promise and chain them in the order that you want.
function getUsers(){
deferred = $q.defer()
$http.get('http://{url}/users')
.success(function (result) {
storeUsers(result);
deferred.resolve('I got users')
}).error(function(data, status, headers, config) {
// called if an error occurs
console.log('error');
deferred.reject(status)
});
return deferred.promise
}
function getNews(){
deferred = $q.defer()
$http.get('http://{url}/news')
.success(function (result) {
storeUsers(result);
deferred.resolve('I got news')
}).error(function(data, status, headers, config) {
// called if an error occurs
console.log('error');
deferred.reject(status)
});
return deferred.promise
}
function getPages(){
deferred = $q.defer()
$http.get('http://{url}/pages')
.success(function (result) {
storePages(result);
deferred.resolve('I got pages')
}).error(function(data, status, headers, config) {
// called if an error occurs
console.log('error');
deferred.reject(status)
});;
return deferred.promise
}
For example lets say that you want to get the Pages after you get the News:
getNews().then(getPages())
Each even better to reject a promise on an error case and have an error handling on the chaining:
getNews().then(function() {
console.log('Success');
getPages();
}, function() {
console.log('Failed');
}, function() {
console.log('Executing... ');
});
Ofcourse the chain also returns a promise which you can handle.
you can chain your requests:
$http.get('http://{url}/users')
.then(function (result) {
storeUsers(result);
$http.get('http://{url}/news')
.then(function (newsResult) {
storeNews(newsResult);
$http.get('http://{url}/pages')
.then(function (pagesResult) {
storePages(pagesResult);
});
});
});
You can make $http requests run after each other by putting the code inside the success promise.
var users; // declare `users` variable
$http.get('http://{url}/users')
.then(function (result) {
storeUsers(result);
// second ajax request
$http.get('http://{url}/news')
.then(function (result) {
storeNews(result);
// third ajax request goes here
// .....
// set the value for users
users = getUsers();
});
});
here a little testScript for using promises with angularJs
$scope.myXhr = function(){
var deferred = $q.defer();
$http({
url: 'ajax.php',
method: "POST",
data:postData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
//if request is successful
.success(function(data,status,headers,config){
//resolve the promise
deferred.resolve("request successful");
})
//if request is not successful
.error(function(data,status,headers,config){
//reject the promise
deferred.reject("ERROR");
});
//return the promise
return deferred.promise;
}
$scope.callXhrAsynchronous = function(){
var myPromise = $scope.myXhr();
// wait until the promise return resolve or eject
//"then" has 2 functions (resolveFunction, rejectFunction)
myPromise.then(function(resolve){
alert(resolve);
}, function(reject){
alert(reject)
});
}
You can try this:
NoticeService.observeReqUser().then(null,null,function(){
$http.get('http://{url}/users')
.then(function (result) {
storeUsers(result);
NoticeService.notifyStatusOne()
});
});
NoticeService.observeReqOne().then(null,null,function(){
$http.get('http://{url}/news')
.then(function (result) {
storeNews(result);
NoticeService.notifyStatusTwo()
});
});
NoticeService.observeReqTwo().then(null,null,function(){
$http.get('http://{url}/pages')
.then(function (result) {
storePages(result);
});
});
var users = getUsers();
You need to create a service to notify the request is done so the next one can be called
app.service('NoticeService',['$q',function($q){
var noticegetUserIsDone = $q.defer();
this.observeReqUser = function() { return noticegetUserIsDone.promise; };
this.notifyStatusUser = function() { noticegetUserIsDone.notify(); };
var noticeReqOneIsDone = $q.defer();
this.observeReqOne = function() { return noticegetUserIsDone.promise; };
this.notifyStatusOne = function() { noticegetUserIsDone.notify(); };
var noticeReqTwoIsDone = $q.defer();
this.observeReqTwo = function() { return noticegetUserIsDone.promise; };
this.notifyStatusTwo = function() { noticegetUserIsDone.notify(); };
};
You will need to call the NoticeService.notifyStatusUser from the end of getUser function so the chain will start to execute (Don't forget to add reference of the NoticeService where you call it)
You can use something like this, if I understand your question correctly:
$http.get('http://{url}/users')
.then(function (result) {
storeUsers(result);
return $http.get('http://{url}/news');
})
.then(function (result) {
storeNews(result);
return $http.get('http://{url}/pages');
})
.then(function (result) {
storePages(result);
users = getUsers();
});
$http.get will return promise.
Updated:
Or more clean solution:
var deferred = $q.defer(),
users;
$http.get('http://{url}/users')
.then(function (result) {
storeUsers(result);
return $http.get('http://{url}/news');
})
.then(function (result) {
storeNews(result);
return $http.get('http://{url}/pages');
})
.then(function (result) {
storePages(result);
deferred.resolve(result);
});
deferred.promise.then(function() {
users = getUsers();
});
Update2:
or more simple:
var request1 = $http.get('http://{url}/users'),
request2 = $http.get('http://{url}/news'),
request3 = $http.get('http://{url}/pages');
$q.all([request1, request2, request3]).then(function(result) {
storeUsers(result[0]);
storeNews(result[1]);
storePages(result[2]);
users = getUsers();
}
But you also need to handle rejection case.
This question already has answers here:
How do I handle errors with promises?
(2 answers)
Closed 8 years ago.
I am using a provider to fetch some data via an API in my angular app and then use it in a controller. The API make call to is sometimes down which results in a 500 error. This error gets printed to the console and I don't know how to handle it gracefully.
Here is my provider code:
function myPvdr() {
this.getUrl = function() {
return 'http://path/to/my/API';
};
this.$get = function($q, $http) {
var self = this;
return {
getData: function(points) {
var d = $q.defer();
$http({
method: 'GET',
url: self.getUrl(),
cache: true
}).success(function(data) {
d.resolve(data);
}).error(function(err) {
d.reject(err);
});
return d.promise;
}
}
}
}
And here is how I use it in my controller:
function myCtrl($scope, myProvider, localStorageService) {
$scope.myData = localStorageService.get('data') || {};
myProvider.getData()
.then(function(data) {
localStorageService.set('data', data);
$scope.data = data;
});
}
How can I handle the 500 error properly, i.e. not throw any error to the console and use the data provided in local storage if any?
Many thanks
You can catch the reject of promise like this :
myProvider.getData()
.then(function(data) {
// promise resolved, data treatment
}, function(error) {
// promise rejected, display error message
});
or
myProvider.getData()
.then(function(data) {
// promise resolved, data treatment
})
.catch(function(error) {
// promise rejected, display error message
});
var app = angular.module('app', []);
function myProvider($http, $q) {
this.getUrl = function() {
return 'http://path/to/my/API';
};
this.getdata = function(points) {
var d = $q.defer();
$http({
method: 'GET',
url: this.getUrl(),
cache: true
}).then(function(data) {
d.resolve(data);
},function(err) {
d.reject(err);
});
return d.promise;
};
return this;
}
app.factory('myProvider', myProvider);
app.controller('firstCtrl', function($scope,myProvider){
// $scope.myData = localStorageService.get('data') || {};
getdata = function() {
myProvider.getdata()
.then(function(data) {
localStorageService.set('data', data);
$scope.data = data;
},
//handle error
function(e){
alert("Error " + e.status);
});
};
getdata();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
</div>
</body>