i have written a service with take parameter on the basis of which it response me with the response of http request.
this.getPaymentDueDetails=function(date){
this.getfromRemote('paymentdue/'+btoa(date))
.success(function(response){
return response;
})
.error(function(response){
return false;
})
}
getfromRemote is my another service which make http request
now i am trying to get the response of this service call inside my controller function
$scope.callDueReports=function(blockNum){
var data;
data=myAngService.getPaymentDueDetails('2015-04-20');
console.log(data);
}
its quite obvious that i wont get any thing in data as the page loads initially but i want the result of getPaymentDueDetails int it.
Please modify your service to return the promise like below.
this.getPaymentDueDetails = function(date) {
return this.getfromRemote('paymentdue/' + btoa(date));
};
And in controller check if the promise is resolved.
$scope.callDueReports = function(blockNum) {
var data;
myAngService.getPaymentDueDetails('2015-04-20').then(function(dataFromService) {
data = dataFromService;
console.log(data);
})
.catch(function(response) {
console.error('error');
});
};
Related
I'm new to AngularJS and this is my first question in stackoverflow. I've been reading a lot of possible answers for this problem but I didn't find a solution. I have this in my factory (I think the important part is between the dots):
;(() => {
app.factory('Users', users)
users.inject = ['$state', 'UserServices']
function users($state, UserServices) {
users.users = [];
.....
users.activeDeactive = (userId, activate) => {
UserServices.activeDeactive(userId, activate).then(
response => {
console.log(response); //it shows "{status: 0}", which is the desired value
return response;
}
)
}
.....
return users;
}
})()
And this in my controller:
;(() => {
app.controller('UsersCtrl', usersCtrl);
function usersCtrl($scope, $state, Users, users, vendors, profiles, clients) {
Users.users = users;
.....
$scope.activeDeactive = function(userId, activate) {
var response = Users.activeDeactive(userId, activate);
console.log(response); //it shows undefined
}
.....
};
})();
How can I also get "{status: 0}" in the controller? I'm stuck on this for a long time... I've read about waiting for a service to resolve the data, to wait for the promise, etc... but I think this problem is much more simpler, because I've already managed to send the service info to this factory... The problem now is to send the data from the factory to the controller... Thank you very much!
Use below syntax in controller. The reason your code not working is you have written a service called Users.activeDeactive, you are calling it from the controller but not waiting for the response. Its very important to wait for the response. If the service call is successful, it will execute then part. Here you need to catch the response like in given syntax only.
In case of errors, it will go to the error part.
;(() => {
app.controller('UsersCtrl', usersCtrl);
function usersCtrl($scope, $state, Users, users, vendors, profiles, clients) {
Users.users = users;
.....
$scope.activeDeactive = function(userId, activate) {
Users.activeDeactive(userId, activate).then(function(data){
response = data;
console.log(response);
},
function(error){
console.log(error);
});
.....
};
})();
in users factory method return promise.
users.activeDeactive = (userId, activate) => {
return UserServices.activeDeactive(userId, activate).then(
response => {
console.log(response);
return response;
}
)
}
and in controller method change to accept resolve object.
$scope.activeDeactive = function(userId, activate) {
Users.activeDeactive(userId, activate).then(response =>{
console.log(response);
});
}
Reason behind doing is .. UserService looks aync method as you have then in user factory. so controller method will call user factory method and will not wait until userservice returns data as that goes in to event loop. to make it work return promise from user factory method.
I'm trying to get a value from a backend API into my controller using $q.when in angular. The function on my controller is calling a non-async function in a service that is invoking other functions to call the backend with the $http service.
$q.when will successfully log the response object but when I try to log the properties of the object, they come up blank. What do I need to do with this? I guess the values are being assigned before the response comes back but I thought the .then statement in $q when was supposed to take care of this?
Controller:
init();
function init(){
$q.when(MyProfileService.fetchProfile()).then(function(response){
// This logs the object and I can see the email property is populated:
console.log("resolved with value:");
console.log(response);
// This comes up with blank value
console.log("attempting to log response data:")
console.log(response.user.email);
});
}
MyProfileService:
function fetchProfile() {
return ProfileService.getProfile()
.then(function(response){
var profileObject = ProfileSaveService.getData();
var transRef = { transientRef: profileObject.card.transientRef }
// and pass it into the function for retrieving the estatement optin details.
fetchEstatementStatus(transRef);
return service;
}).catch(function(error){
console.error(error);
});
}
function fetchEstatementStatus(transRef) {
return HttpService.httpPost('/dash/v1/account/retrieveCommProfile', transRef)
.then(function(response) {
service.user.email = response.data.userEmail;
// This should return the service object with all the properties set:
return service;
})
.catch(function(error) {
return $q.reject(error);
});
}
You fire off the asynchronous fetchEstatementStatus(transRef); call but never wait for it. Instead, you immediately return the service. You need to return the promise from the then callback to make it wait:
function fetchProfile() {
return ProfileService.getProfile().then(function(response){
var profileObject = ProfileSaveService.getData();
return fetchEstatementStatus({transientRef: profileObject.card.transientRef});
// ^^^^^^
}).catch(function(error){
console.error(error);
});
}
function fetchEstatementStatus(transRef) {
return HttpService.httpPost('/dash/v1/account/retrieveCommProfile', transRef).then(function(response) {
service.user.email = response.data.userEmail;
return service;
});
}
I have this app that uploads a file to a server using $cordovaFileTransfer and then sends data about the file to the same server. The file is transferred fine. The data is then sent to the server, and the server responds. But the response does not make it back to the promise callback. Why?
$scope.sendPost = function(data) {
//first upload a file then send more data about the file
$cordovaFileTransfer.upload('http://example.com', 'myfile.txt', options)
.then(function(result) {
var promise = MyFactory.sendFileData(data);
});
promise.then(function(response) {
//we never make it to here
});
}
and in MyFactory:
service.sendFileData = function(data) {
return $http({
//bunch of parameters. This function works, data is sent to the server and a response received
}).then(function(response) {
//this is fired when the response is received from the server. All is good so far.
return.response.data
});
}
return service;
$cordovaFileTransfer.upload returns a promise object, which you could use to build up promise chaining mechanism.
Code
$scope.sendPost = function(data) {
//get hold on `upload` function promise
var promise = $cordovaFileTransfer.upload('http://example.com', 'myfile.txt', options)
.then(function(result)) {
//return MyFactory.sendFileData promise here which will follow promise chaining
return MyFactory.sendFileData(data);
});
//promise.then will get call once `MyFactory.sendFileData` complete it
promise.then(function(response) {
//will get called once `sendFileData` complete its promise
});
}
its because you're relaying on another promise's callback to initiate a the promise and.. most probably before the promise gets initialized you are attaching a callback tot it.. so at the time of you attaching the callback, the promise is not yet initialized i.e. promise is null.. so in your console you'll see an error..
try doing some thing like
var x = function(response) {
//we'll make it to here now...
}
$cordovaFileTransfer.upload('http://example.com', 'myfile.txt', options)
.then(function(result)) {
var promise = MyFactory.sendFileData(data);
promise.then(x);
});
You should follow #PankajParkar solution though it's a better approach...
$scope.sendPost = function(data) {
//first upload a file then send more data about the file
$cordovaFileTransfer.upload('http://example.com', 'myfile.txt', options)
.then(function(result)) {
return MyFactory.sendFileData(result.data);
})
.then(function(response) {
});
My service define like this:
module.factory('portfolio',function(){
var data;
var selectedPort;
return{
getData: function(){
return data;
},
setData:function(portfolios){
data = portfolios;
},
getSelectedPort:function(){
return selectedPort;
},
setSelectedPort:function(portfolioDetail){
selectedPort = portfolioDetail;
}
}
});
And in my controller the code as follows:
module.controller('portfoliosController', function($scope,$http, alertService,stockService, userDataService, portfolio){
var req = {
method: 'get',
url: 'www.facebook.com',
headers: {
'Authorization': userDataService.getToken()
}
};
$http(req).then(function(reponse){
$scope.portfoliosPriceList = reponse['data'];
portfolio.setData($scope.portfoliosPriceList);
console.log(portfolio.getData())//At here,I can get the portfolio's data
}, function(){
alertService.setMessge("System maintenance , please try again later");
alertService.alert();
});
console.log(portfolio.getData())//At here, I cannot get the portfolio's data
});
the error is
Error: undefined is not an object (evaluating 'message.substr')
Anybody can help me to solve this problem?Actually, I really do not understand, why I cannot get the data outside the $http
The request that you do with the $http service is done asynchronously, so the callback that you pass to the .send is not immediately invoked.
The code that follows (the console.log) is executed just after the $http(req) call is made but before the callback is called when the request is responded.
Maybe you will understand better with an simpler example:
function portfoliosController() {
var data = 'Initial Data. ',
content = document.getElementById('content');
// setTimeout would be your $http.send(req)
// calledLater would be your .then(function() { ... })
setTimeout(function calledLater() {
data = 'Data coming from the server takes some time to arrive...';
content.innerHTML = content.innerHTML + data;
}, 1000);
content.innerHTML = content.innerHTML + data;
}
portfoliosController();
<div id="content">
This is because javascript is asynchronous, so the code:
portfolio.getData()
Is maybe executing before the data is returned from the service.
In this case, you should only use the data of the portfolio just after the request is complete (inside the .then() function of $http) or put a promise.
Here is the documentation for angular promises:
https://docs.angularjs.org/api/ng/service/$q
I'm trying to figure out if it is possible to use a $http interceptor to cancel a request before it even happens.
There is a button that triggers a request but if the user double-clicks it I do not want the same request to get triggered twice.
Now, I realize that there's several ways to solve this, and we do already have a working solution where we wrap $http in a service that keeps track of requests that are currently pending and simply ignores new requests with the same method, url and data.
Basically this is the behaviour I am trying to do with an interceptor:
factory('httpService', ['$http', function($http) {
var pendingCalls = {};
var createKey = function(url, data, method) {
return method + url + JSON.stringify(data);
};
var send = function(url, data, method) {
var key = createKey(url, data, method);
if (pendingCalls[key]) {
return pendingCalls[key];
}
var promise = $http({
method: method,
url: url,
data: data
});
pendingCalls[key] = promise;
promise.finally(function() {
delete pendingCalls[key];
});
return promise;
};
return {
post: function(url, data) {
return send(url, data, 'POST');
}
}
}])
When I look at the API for $http interceptors it does not seem to be a way to achieve this. I have access to the config object but that's about it.
Am I attempting to step outside the boundaries of what interceptors can be used for here or is there a way to do it?
according to $http documentation, you can return your own config from request interceptor.
try something like this:
config(function($httpProvider) {
var cache = {};
$httpProvider.interceptors.push(function() {
return {
response : function(config) {
var key = createKey(config);
var cached = cache[key];
return cached ? cached : cached[key];
}
}
});
}
Very old question, but I'll give a shot to handle this situation.
If I understood correctly, you are trying to:
1 - Start a request and register something to refer back to it;
2 - If another request takes place, to the same endpoint, you want to retrieve that first reference and drop the request in it.
This might be handled by a request timeout in the $http config object. On the interceptor, you can verify it there's one registered on the current request, if not, you can setup one, keep a reference to it and handle if afterwards:
function DropoutInterceptor($injector) {
var $q = $q || $injector.get('$q');
var dropouts = {};
return {
'request': function(config) {
// I'm using the request's URL here to make
// this reference, but this can be bad for
// some situations.
if (dropouts.hasOwnProperty(config.url)) {
// Drop the request
dropouts[config.url].resolve();
}
dropouts[config.url] = $q.defer();
// If the request already have one timeout
// defined, keep it, othwerwise, set up ours.
config.timeout = config.timeout || dropouts[config.url];
return config;
},
'requestError': function(reason) {
delete dropouts[reason.config.url];
return $q.reject(reason);
},
'response': function(response) {
delete dropouts[response.config.url];
return response;
},
'responseError': function(reason) {
delete dropouts[reason.config.url];
return $q.reject(reason);
}
};
}