I have:
this.isAuthenticated = function() {
var deferred;
deferred = $q.defer();
$http({
url: "" + endpoints.authService + "api/v1/session/check",
method: 'GET',
withCredentials: true
}).success(function(response) {
var user;
if (response.authenticated === true) {
user = response;
}
return deferred.resolve(response);
}).error(function(data, status, headers, config) {
deferred.reject(data);
return $rootScope.$broadcast('api-error', 'Cannot access authentication service');
});
return deferred.promise;
};
Assuming that the endpoint is down, apparently it tries to do the call infinitely. Is this some known Angular behavior? And can I disable it?
No factory making http call when your controller invoking that call please see here: http://plnkr.co/edit/u7YSD8gkbOSKN32SU62P?p=preview. It's rather you controller keeping call factory function.
var app = angular.module('plunker', []);
app.factory('dataService', function($http, $q, $rootScope) {
var endpoints = {
authService: "ttest"
};
this.isAuthenticated = function() {
var deferred;
deferred = $q.defer();
$http({
url: "" + endpoints.authService + "api/v1/session/check",
method: 'GET',
withCredentials: true
}).success(function(response) {
var user;
if (response.authenticated === true) {
user = response;
}
return deferred.resolve(response);
}).error(function(data, status, headers, config) {
deferred.reject(data);
return $rootScope.$broadcast('api-error', 'Cannot access authentication service');
});
return deferred.promise;
};
return this;
});
app.controller('MainCtrl', function($scope, dataService) {
$scope.$on('api-error', function(a, b){
alert(b);
});
dataService.isAuthenticated();
});
just put this deferred.resolve(response); instead of return deferred.resolve(response);
and also remove return from :
return $rootScope.$broadcast('api-error', 'Cannot access authentication service');
Related
I call getBookIDs from factory and by using the result I call getBookInfo from the same factory. but in the Console.log(bookInfo) it shows me the result of previous call!
how can I update the deferred.promise value before returning??
this is my controller
angular.module('myApp.products',[])
.controller('productController', function ($scope , MainFactory , $location) {
function getBookInfo(bookIDs){
MainFactory.getBookList(bookIDs)
.then(function (bookInfo) {
console.log(bookInfo)
})
}
MainFactory.getBookIDs()
.then(function (result) {
$scope.bookIDList = result;
getBookInfo($scope.bookIDList);
});
});
and this is my factory
app = angular.module('myApp');
app.factory("MainFactory", ['$soap', '$http', '$q', function ($soap, $http, $q) {
var viewFactory = {};
var deferred = $q.defer();
viewFactory.getBookIDs = function () {
//var bookIDs = [];
$http({
url: 'http://127.0.0.1/client.php?fn=getBooks',
method: "GET"
}).then(function success(response) {
deferred.resolve(response.data.result);
}, function myError(error) {
console.log('error', error);
});
return deferred.promise;
};
viewFactory.getBookList = function (bookIDs) {
$http({
url: 'http://127.0.0.1/client.php?fn=getBooksInfo&p1=' + bookIDs,
method: "GET"
}).then(function success(response) {
deferred.resolve(response.data.result);
}, function myError(error) {
deferred.reject(error);
});
return deferred.promise;
};
return viewFactory;
}]);
You should return a new promise for each of your service methods:
app.factory("MainFactory", ['$soap', '$http', '$q', function ($soap, $http, $q) {
var viewFactory = {};
viewFactory.getBookIDs = function () {
var deferred = $q.defer();
//var bookIDs = [];
$http({
url: 'http://127.0.0.1/client.php?fn=getBooks',
method: "GET"
}).then(function success(response) {
deferred.resolve(response.data.result);
}, function myError(error) {
console.log('error', error);
});
return deferred.promise;
};
viewFactory.getBookList = function (bookIDs) {
var deferred = $q.defer();
$http({
url: 'http://127.0.0.1/client.php?fn=getBooksInfo&p1=' + bookIDs,
method: "GET"
}).then(function success(response) {
deferred.resolve(response.data.result);
}, function myError(error) {
deferred.reject(error);
});
return deferred.promise;
};
return viewFactory;
}]);
Promises should not be reused (unless you wish to perform multiples tasks triggering the same resolve/reject... still, you should explicitly implement a promise aggregator for that, I think).
All angular services are singletons, so i guess the reason you got this bug is getBookIDs and getBookList share the same deferred
try change your factory to
app.factory("MainFactory", ['$soap', '$http', '$q', function ($soap, $http, $q) {
var viewFactory = {};
viewFactory.getBookIDs = function () {
//var bookIDs = [];
var deferred = $q.defer();
$http({
url: 'http://127.0.0.1/client.php?fn=getBooks',
method: "GET"
}).then(function success(response) {
deferred.resolve(response.data.result);
}, function myError(error) {
console.log('error', error);
});
return deferred.promise;
};
viewFactory.getBookList = function (bookIDs) {
var deferred = $q.defer();
$http({
url: 'http://127.0.0.1/client.php?fn=getBooksInfo&p1=' + bookIDs,
method: "GET"
}).then(function success(response) {
deferred.resolve(response.data.result);
}, function myError(error) {
deferred.reject(error);
});
return deferred.promise;
};
return viewFactory;
}]);
I am using angularjs and cordova tool for creating application.
I have created service, which contains code for calling APIs. and in that I want to return response to my angular controller.
My code is,
Service,
JodoModule.factory('commonServices', function ($http, $q, $rootScope) {
return {
getServiceData: function (url) {
$rootScope.loading = true;
var deferred = $q.defer();
var req = {
method: 'GET',
url: url
}
$http(req).success(function (data) {
alert("data in service = " + JSON.stringify(data.Data));
deferred.resolve(data);
}).error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
};
});
My controller is,
commonServices.getServiceData("My url").
success(function (data, status, headers, config) {
alert(data);
}).
error(function (data, status, headers, config) {
alert("Got error");
});
In above code, in service, its showing elert message for JSON.stringify(data.Data)); in success block, so data is comming, but its not executing deferred.resolve(data); properly...
in Web tool bar its giving me error,
ie. TypeError: undefined is not a function
My o/p is :
{"status":"SUCCESS","Message":"success","Token":"","Data":[{"Id":17,"UserId":"477f1919-6b80-4804-a325-ac0cb05bcd3e","UserName":"honey","FirstName":"honey","LastName":null,"ProfilePic":false,"Status":2}]}
How can I solve this error. ?
Ordinary $q promises don't have a .success() or .error() method, but you shouldn't be using the deferred antipattern anyway. Instead, do this:
JodoModule.factory('commonServices', function ($http, $rootScope) {
return {
getServiceData: function (url) {
$rootScope.loading = true;
var req = {
method: 'GET',
url: url
};
return $http(req).then(function (result) {
alert("data in service = " + JSON.stringify(result.data.Data));
return result.data;
});
}
};
});
Controller:
commonServices.getServiceData("My url").
then(function (data) {
alert(data);
}).
catch(function (result) {
alert("Got error");
});
Quite a bit cleaner, ay?
I'm trying to write an Angular service and it seems like there is something missing. My problem is its not returning any value to my Angular controller
getPrepTimes() method is not returning the http data
But when I check the network (via Chrome dev tools) it will correctly call the external api and return a json object as a response
#my service
'use strict';
angular.module('recipeapp')
.service('prepTimeService',['$http', function($http){
this.prepTime = getPrepTimes();
function getPrepTimes(){
$http({
url: '/prep_times/index.json',
method: 'GET'
})
.success(function (data, status, header, config){
return data;
});
};
}
]);
#controller
'use strict';
angular.module('recipeapp')
.controller('recipeCtrl', ['$scope', 'prepTimeService', function($scope, prepTimeService){
$scope.prep_time = prepTimeService.prepTime;
}]);
When I checked the method getPrepTimes() with returning a string it works. What could be missing here?
A couple things are wrong with the above. You assign this.prepTime to getPrepTimes(). The () there will invoke getPrepTimes immediately, and not when you actually call it! You also need to utilize callbacks to get your data back and use it:
angular.module('recipeapp').service('prepTimeService',['$http', function($http){
this.prepTime = getPrepTimes;
function getPrepTimes(callback) {
$http({
url: '/prep_times/index.json',
method: 'GET'
}).success(function (data, status, header, config){
callback(data);
});
};
}]);
And now use it like so:
prepTimeService.prepTime(function(data) {
$scope.prep_time = data;
});
Calls to the $http service are async, which means you need to return a promise (and not a value):
this.prepTime = function() {
return $http({
url: '/prep_times/index.json',
method: 'GET'
});
};
And on the controller:
angular.module('recipeapp')
.controller('recipeCtrl', ['$scope', 'prepTimeService', function($scope, prepTimeService){
$scope.prep_time = prepTimeService.prepTime()
.success(function (data, status, header, config){
$scope.someVar = data;
});
}]);
Wrap answer with promise:
var self = this;
var deferred = $q.defer();
self.getPrepTimes = function() {
$http({
url: '/prep_times/index.json',
method: 'GET'
})
.success(function(data, status, headers, config) {
if (data.error === undefined) {
deferred.resolve(data);
} else {
if (data.error !== undefined) {
} else {
deferred.reject(data);
}
}
}).error(function(data, status, headers, config) {
deferred.reject(data);
});
return deferred.promise;
};
In controller call it:
prepTimeService.getPrepTimes().then(function(result) {
$scope.prep_time = result;
},
function(error) {
// show alert
});
I have an angular service that talks to a restful webservice.
The restful service has the following methods
getManifest
login
serviceMethod1
serviceMethod2
...
The getManifest returns a manifest structure and the login returns an authentication token; both are required to make other serviceMethodX calls but both manifest and auth token needs to be requested only once, meaning they can be requested part of the first serviceMethodX call or can be prefetched before any call but need not be called again for subsequent calls.
I have the following service
'use strict';
myApp.factory('MyService', function($http, $q, ManifestService){
var manifest = null;
var authenticationToken = null;
return {
getAuthenticationToken: function() {
var deferred = $q.defer();
$http.post('/login', authData )
.success(function(data, status, headers, config){
authenticationToken = data.authToken;
deferred.resolve(data.authToken);
});
return deferred.promise;
},
getManifest: function() {
var deferred = $q.defer();
$http.post('/manifest', authData )
.success(function(data, status, headers, config){
deferred.resolve(data.manifest);
manifest = data.manifest;
});
return deferred.promise;
},
makeServiceCall: function(url, data) {
var deferred = $q.defer();
// use manifest and authtoken here
$http.post(url, authData )
.success(function(data, status, headers, config){
deferred.resolve(data);
});
return deferred.promise;
}
}
});
How can I guarantee manifest and authToken are populated before makeService function is called or how an I chain the promises if they are not populated, just the first time?
Thanks
You could have something like a reqsDeferred that keeps the service calls pending until it is resolved. login and getManifest each check if the other resolved before them, and resolve reqsDeferred when so:
'use strict';
myApp.factory('MyService', function($http, $q, ManifestService){
var manifest = null;
var authenticationToken = null;
// [1] Create the deferred requirements object
reqsDeferred = $q.defer();
return {
getAuthenticationToken: function() {
var deferred = $q.defer();
$http.post('/login', authData )
.success(function(data, status, headers, config){
authenticationToken = data.authToken;
deferred.resolve(data.authToken);
//[2] Check for the other to be resolved
if (manifest !== null) {
reqsDeferred.resolve();
}
});
return deferred.promise;
},
getManifest: function() {
var deferred = $q.defer();
$http.post('/manifest', authData )
.success(function(data, status, headers, config){
deferred.resolve(data.manifest);
manifest = data.manifest;
//[2] Check for the other to be resolved
if (authenticationToken !== null) {
reqsDeferred.resolve();
}
});
return deferred.promise;
},
makeServiceCall: function(url, data) {
var deferred = $q.defer();
//[3] Keep the calls pending until the promise is satisfied
reqsDeferred.promise.then( function () {
// use manifest and authtoken here
$http.post(url, authData )
.success(function(data, status, headers, config){
deferred.resolve(data);
});
});
return deferred.promise;
}
}
});
Consider the code:
var myApp = angular.module('myApp', []);
The routes:
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app.html',
controller:myAppController,
resolve:{
resolveData:function(Resolver){
return Resolver();
}
}
});
});
Resolve:
myApp.factory('Resolver', ['$http', function($http){
return function(){
return $http({url: '/someurl',method: "GET"}).then(function(data) {
// dependent call 1
$http({url: '/someotherurl',method: "GET" }).then(function(data) {
});
// dependent call 2
$http({url: '/someanotherurl',method: "GET" }).then(function(data) {
});
});
}
}]);
Above I have nested 2 calls inside one as they are dependent on the data returned by the parent call.
What I want to do: return the Resolver when all of them have completed and not just the parent call.
I cannot use $q.all() because 2 of the calls are dependent of the first call.
In short, myAppController must be loaded only after all the 3 calls have completed.
You should be using chaining promise and $q service to solve your problem .Just use the below sample code it should work
myApp.factory('Resolver', ['$http','$q', function ($http,$q) {
return function () {
var deferred = $q.defer();
$http({ url: '/someurl', method: "GET" }).then(function (data) {
return $http({ url: '/someurl', method: "GET" })
}).then(function (data) {
return $http({ url: '/someanotherurl', method: "GET" })
}).then(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
}]);
This works for me:
resolve : {
message: function($q, $route, Restangular) {
var msgId = $route.current.params.msgId;
var deferred = $q.defer();
Restangular.one('message', msgId).get().then(function(message) {
Restangular.one('file', message.audioFile.id).get().then(function (blob) {
message.blob = blob;
deferred.resolve(message);
});
});
return deferred.promise;
}
}