So been struggling a bit with getting promises to work properly, but after a lot of work, think I have gotten it. So now comes the question, can you create a self fulfilling promise, if you don't want to wait for the real thing...
Short pseudo version of what I want to do
var promise;
if (!factory.isDataLoaded()){
//The data is not loaded
var promise = factory.init();
} else {
//Data is all loaded
var promise = getSelfFullfilingPromise
}
//Some other code
promise.then(function({
//Do some stuff with the data from factory. which we know is loaded
})
Consider this option (taken straight from my app). I have a factory that loads up a couple of tables, especially one, it translates ids from one table to arrays of names, status and so forth from another table. Then the code does all kinds of wonderful things with it.
OK, it does some massaging and makes pretty diagrams. Problem is that if the initiation of the factory (i.e. do an API call, get some data, store it in a variable) haven't finished, half my page does not render, my boss gets angry, I get fired, and I'll have to dumpster dive behind McDonald (OK, not quite that bad).
So moved my init api call to a promise, sweet.
Then created a helper function that returns status (it checks if there is data in a variable and returns true or false). And I have the request it self (idGetSkill).
I then also have a directive which is called about 20 times, so I don't really want to call my init 20 times in order to ensure that there is data. I only whant to call it if the data is empty, or of skillLoaded returns false.
But if I use .then as a callback, I need a promise that resolves for it to run. So was thinking.
An example of where it could be used:
The Factory
.factory('skillFactory', function($http) {
var skillFactory = [];
var skills = [];
var searchId = [];
var mySkillId = [];
skillFactory.init= function() {
console.log("Got called")
return $http.get('/api/skillList')
.then(function(data){
skills=data['data']
console.log('Skill test ' + skills[0].alias );
})
}
skillFactory.skillLoaded=function(){
if(skills.length < 1) {
console.log("Warning, no data");
return false;
} else {
return true;
}
}
skillFactory.idGetSkill = function(data) {
if (skills.length < 1){
console.log("Warning, no data");
} else {
for (var id in skills) {
if (data == skills[id]._id) {
return skills[id];
}
}
}
}
}
And an app calling it
.controller("PromiseLoad", function ($scope, $http, $window, skillFactory ) {
var promise;
if( ! skillFactory.skillLoaded() ){
promise = skillFactory.init();
} else {
promise = skillFactory.init();
}
var skill = '55c8a069cca746f65c9836a1'
console.log("Will ask for skill " + skill)
promise.then( function() {
console.log("Im done waiting!")
$scope.answer = skillFactory.idGetSkill(skill);
console.log ("And got " +$scope.answer.alias);
})
});
(OK, the above example does not really need it, but its easier to provide this example rather than a directive as that needs a lot more things to work. Like data and stuff:) )
$q.when(data) returns a resolved promise.
$q.reject(data) returns a rejected promise.
Related
So i have a bit of a confusion with angular promises.
I have a service, storing a list of users
.service('user', ['$q','$http', function ($q, $http) {
var services = {};
var _def_userLsit = $q.defer();
$http.get('/api/acc/getlist').then(function (data) {
_def_userLsit.resolve(data);
})
services.getUserListQ = function () {
return _def_userLsit.promise;
}
return services;
}])
after injecting it, i can load my list like this in a controller:
user.getUserListQ().then(function (promise) {
$scope.userHelper.userList = promise.data;
});
no problem here, got the json in the $scope, then the watchers do their jobs just fine.
Here is the Json format simplified for the question:
obj 1 { id=4, userName="foohuman", $$hashKey="object:14"}
obj 2 { id=444, userName="barhuman", $$hashKey="object:22"}
But i also want a user's name by id, and i need to run that several times ( depend on the post count ).
So my question here is, how can i return a user's name like a function call, from that promised list.
like a normal function would do, like this:
$scope.getUserById = function( id ){
return "foo";
//some magic needed here
}
If i just iterate trough the userHelper.userList, it could be empty if it runs too early, so i need to load that trough a promise, but loading it, iterating trough, then adding a string to the $scope is not the best options, since it can run multiple times, so it can overwrite each other, pretty unpredictably if i store it in a single variable.
So any idea how can i return a nice simple string by the id, and not a promise?
EDIT: Ok, so i can't really return a nice string, because it have to be some kind of callback, but i can process the data from the promise, so i ended up loading user data into a array like this:
user.getUserListQ().then(function (promise) {
var uArr = [];
angular.forEach(promise.data, function ( value, key ) {
uArr[value.id] = value.userName;
})
$scope.userHelper.uArr = uArr;
});
and in the html I can boldly write {{userHelper.uArr[taskData.tOwner]}}.
First of all, you're making promises harder than they should be by using the explicit construction antipattern. Your first code snippet can be replaced with this:
.service('user', ['$q','$http', function ($q, $http) {
var services = {};
var pUserList = $http.get('/api/acc/getlist');
services.getUserListQ = function () {
return pUserList;
};
return services;
}]);
Regarding your question:
So any idea how can i return a nice simple string by the id, and not a promise?
This is the wrong mindset to have. For getting a user by their ID, you need to think in terms of promises. You don't know exactly when the data is going to be ready, so this means that your getUserId method should return a promise. You can write it like this:
services.getUserById = function (id) {
return pUserList.then(function (users) {
return users.filter(function (user) { return user.id === id; })[0];
});
};
in your controller, you can use it like this:
myService.getUserById(4).then(function (user) {
$scope.myUser = user;
});
I've a service like this:
angular.module('module')
.factory('UserList', function ($http) {
return {
getUserList: $http.get('/portal-services/NemesysPortalBackend/rest/user/all')
};
});
this constraint me to do
UserList.getUserList.then(function(res){$scope.data = res.data;})
in every controller where I need it.
Is there any way to "facade" it to simply have
$scope.data = UserList.getUserList();
Thanks
I'm making an assumption here that the user list doesn't change often, so this way you can cache it to a variable... otherwise you will need to make a call each time you expect the list changes (or reload the list using an interval?)
Fetching data before it's really needed is called "Eager loading"
angular.module('module').factory('UserList', function ($http, $q, $interval) { // import $q as well
var userList = []; // initialized as blank array
var refreshList = function(){
var deferred = $q.defer();
$http.get('/portal-services/NemesysPortalBackend/rest/user/all').then(
function(successResponse){
userList = successResponse.data;
deferred.resolve(successResponse);
},function(failureResponse){
// do something on error?
deferred.reject(failureResponse);
});
return deferred.promise;
}
refreshList(); // eager load, run right away
// i don't recommend this next line, there are better ways of doing this
$interval(refreshList(), 1000*60); // get new list every 60 seconds
return {
getUserList: function(){ return userList; }, // return user list only
refreshList: function(){ refreshList(); } // return promise which getting new list
};
});
Again, I don't recommend using $interval to reload the list, but instead call refreshList any time updates are made to the user list
Ex:
angular.module('module').controller('userCtrl', function(UserList) {
$scope.data = UserList.getUserList();
// once you change the user list, call a refresh
UserList.addUser().then(UserList.refreshList()).then(function(){
$scope.data = UserList.getUserList();
);
});
You cannot do this because JavaScript is single-threaded. This means, that when you use some call that is asynchronous, you cannot ever make it synchronous. There is no waiting(*) in Javascript. You cannot block your function call to wait for the results from the server.
Even if you tried as hard as this:
function getResult() {
var result;
UserList.getUserList.then(function(res) {
result = res.data; // this should break the loop below
});
while (!result) {}; // active waiting, wasting CPU cycles
return result;
}
...it wouldn't work because the callback function will not be executed until the currently running code (i.e., the infinite loop) finishes. An infinite loop like this would freeze the whole application forever.
(*) this doesn't mean that you cannot schedule functions to be called at some point later. Promises and closures help a lot with it.
I have a service method that has some caching logic:
model.fetchMonkeyHamById = function(id)
{
var that = this;
var deferred = $q.defer();
if( that.data.monkeyHam )
{
deferred.resolve( that.data.monkeyHam );
return deferred.promise;
} else {
return this.service.getById( id).then( function(result){
that.data.monkeyHam = result.data;
});
}
};
I know how to use $httpBackend to force the mocked data to be returned. Now, how do I force it to resolve (and then test the result) when I've set the data explicitly?
I want to test the result in the controller then() function:
MonkeyHamModel.fetchMonkeyHamById(this.monkeyHamId).then( function() {
$scope.currentMonkeyHam = MonkeyHamModel.data.monkeyHam;
});
Then my test I want to explicitly set the data (so it loads from memory "cache" instead of httpBackend)
MonkeyHamModel.data.monkeyHam = {id:'12345'};
MonkeyHamModel.fetchMonkeyHamById( '12345');
// How to "flush" the defer right here like I would have flushed httpBackend?
expect( $scope.currentMonkeyHam.id ).toEqual('12345'); //fails because it is not defined yet since the $q never resolved
Where $scope is just the scope of my controller, but called $scope here for brevity.
UPDATE:
The suggested answer does not work. I need the function to return a promise, not a value that is the result of a promise:
model._monkeyHams = {} // our cache
model.fetchMonkeyHamById = function(id){
return model.monkeyHams[id] || // get from cache or
(model.monkeyHams[id] = this.service.getById(id).then(function(result){
return result.data;
}));
};
The following requires that you have touched the server already. I create a model on the front end (currentMonkeyHam) or whatever, and don't load it back after the first POST (an unnecessary GET request). I just use the current model. So this does not work, it requires going out to the server at least once. Therefore, you can see why I created my own deferred. I want to use current model data OR get it from the server if we don't have it. I need both avenues to return a promise.
var cache = null;
function cachedRequest(){
return cache || (cache = actualRequest())
}
Your code has the deferred anti pattern which makes it complicated - especially since you're implicitly suppressing errors with it. Moreover it is problematic for caching logic since you can end up making multiple requests if several requests are made before a response is received.
You're overthinkig it - just cache the promise:
model._monkeyHams = {} // our cache
model.fetchMonkeyHamById = function(id){
return model.monkeyHams[id] || // get from cache or
(model.monkeyHams[id] = this.service.getById(id).then(function(result){
return result.data;
}));
};
In your case, you were caching all IDs as the same thing, the general pattern for caching promises is something like:
var cache = null;
function cachedRequest(){
return cache || (cache = actualRequest())
}
Creating deferred is tedious and frankly - not very fun ;)
You can use setTimeout (or $timeout) for resolving the promise.
You can modify your code as -
model.fetchMonkeyHamById = function(id)
{
var that = this;
var deferred = $q.defer();
if( that.data.monkeyHam )
{
setTimeout(function() {
deferred.resolve(that.data.monkeyHam);
}, 100);
return deferred.promise;
} else {
return this.service.getById( id).then( function(result){
that.data.monkeyHam = result.data;
});
}
};
EDIT:
Modified as per Benjamin's suggestion -
Using $rootScope.digest() - code should be something like this
MonkeyHamModel.data.monkeyHam = {id:'12345'};
MonkeyHamModel.fetchMonkeyHamById( '12345');
$rootScope.digest();
We've done something similar in our code base, but instead of having an object with state that constantly changed we went with something that looks more like a traditional repository.
someInjectedRepoistory.getMonkeyHamModel().then(x => $scope.monkeyHam = x);
Repository{
getMonkeyHamModel() {
var deferred = $q.defer();
if( this.cache.monkeyHam )
{
deferred.resolve( this.cache.monkeyHam );
} else {
return this.service.getById( id).then( function(result){
this.cache.monkeyHam = result.data;
});
}
return deferred.promise
}
}
There are no problems with returning a completed deferred. That's part of the purpose of the deferreds, it shouldn't matter when or how they are resolved, they handle all of that for you.
As for your test we do something like this.
testGetFromService(){
someInjectedRepoistory.getMonkeyHamModel().then(x => verifyMonkeyHam(x));
verifyHttpBackEndGetsCalled()
}
testGetFromCache(){
someInjectedRepoistory.getMonkeyHamModel().then(x => verifyMonkeyHam(x));
verifyHttpBackEndDoesNotGetCalled()
}
I am creating a "Web Planner" where the user has to complete a number of steps on different pages in order to create an order for our service. I know that I need to use a service in order to share certain data around the entire Planner, but I am still not sure how do go about it.
The problem is that the user will not necessarily go in-order every time. They can stop on any page, then come back later and resume, therefore I need a way to manage some API data so that if the user is on 1 of 2 pages that share the same data, the data will fetched from the server via API or simply assigned if the data was already taken.
Right now the only method I thought of is to place the API requests inside my Service as well, and then when I run something like OrderService.get() the service will handle logic to check if the data was already grabbed from the server. If it was then it is just a simple assignment like $scope.model = OrderService.get(), but then the problem is that if the data isn't loaded yet, then I need to use a promise somewhere to wait for the data, so a simple assignment operation won't suffice.
This service may look something like this:
app.factory('OrderService', function(){
var orders = []; // This is the actual data
var service = {};
service.get = function(id){
if(orders.length){
return orders; // This means there is already data available
}else{
// This is where I am not sure what to do...
// Maybe...
var promise = API.Orders.getAllOrders({id : id}, function(res){
// Not sure about how to implement this part
}).$promise;
return promise;
}
}
})
Does anyone have any other ideas?
Since your calls are asynchronous, the only way to do this is via promises
app.service('OrderService', function($q){ // import $q ; the angularjs promise
var orders = []; // This is the actual data
var service = {};
service.get = function(id){
var deferred = $q.defer(); // create a unit of work to be done; a promise
if(orders.length){ // if data is already available, resolve the promise
deferred.resolve(orders); // This means there is already data available, so mark as resolved and successful
}else{
// make your async call since you don't have data
API.Orders.getAllOrders({id : id}, function(response){
// here you can actually modify the response before it goes back to your controller
deferred.resolve(response);
}, function(reason){ // failure scenario
deferred.reject(reason);
})
}
return deferred.promise; // always return promise
}
})
Just return a promise all the time, whether the data is already there, or fetched by a call to a server. In your example..
if(orders.length){
return $q.when(orders); // This means there is already data available
}else{
// This is where I am not sure what to do...
// Maybe...
var promise = API.Orders.getAllOrders({id : id}, function(res){
// Not sure about how to implement this part
}).$promise;
return promise;
}
Please bear in mind that I'm still a beginner (reading through a lot of documentation) so this might not be 100% correct.
Your service would be something like this:
app.factory('OrderService', function($q){
var orders = []; // This is the actual data
return {
getData: function(id){
var deferred = $q.defer();
if(orders.length){
deferred.resolve(orders); // This means there is already data available
}else{
$http.get('/api/get/data/' + id)
.success(function(data) {
deferred.resolve(data);
})
.error(function(){
deferred.reject();
});
}
return deferred.promise;
}
})
And then on your controllers you just need to use it like this:
app.controller('MainCtrl', function($scope, OrderService) {
var id = 1;
$scope.data = OrderService.getData(id);
});
I asked the wrong question yesterday (and got a goodanswer that worked), but am realizing it's not what I needed. I need to be able to retrieve JSON data (preferably once), store it, and access it throughout my service. The challenge I'm having is that all the examples I can find talk about using JSON and passing to the app/controller, whereas in this case I need to get it, check it, and then it dictates what my module/service does.
For instance, I have my App and Controller, and then I have a module such as (this is psuedo-code, not meant to run):
angular.module("myModule")
.service("myService1", function($q, myService2, $http) {
this.getModel = function() {
return {
title: "My Title",
desc: "My Desc"
options: function () {
if (condition A)
return "option1";
else
return "option2";
}
};
};
})
.service("myService2", function($q, $http) {
this.getCfgInfo = function () {
var defer = $q.defer();
$http.get("my/json/url").then(function(response) {
defer.resolve(response.data);
});
return defer.promise;
};
})
In this example, I'm wanting to get the JSON, and use it within myService1 for both literal values (title, desc) as well as for conditions (condition A within the if).
I know I can do something like this (thanks to Joel for helping yesterday):
service("myService1", function($q, myService2, $http) {
// get a promise object for the configuration info
var cfgProm = rtDataMapper.getCfgInfo()
this.getModel = function() {
return {
title: cfgProm.then(function(response) {
return response.JSON_NAME;
}),
and it works fine as I've got the title mapped back into my model and there is a watch(), but I'm stumped as to how I get, store, and use the JSON within the service itself as a conditional (i.e. if (condition A) where condition A is coming from the JSON. Trying to wrap these in .then() doesn't seem to make sense, or at least I can't figure out how to do it.
I'm new to Angular and am attempting to modify some code that was left to us. I'm guessing I don't need the myService2 just to get the JSON. Can anyone help point me in the right direction? I've spent several hours online but can't seem to find a relevant reference/example.
Thanks
Live demo (click).
I'm having the service immediately get the data when it is injected (that code will only run once no matter how many times you inject it). That's nice because you won't have to call a function to get the data - it's called for when creating the service.
Your service method that returns that data will need to return the promise of the data, of course, since you aren't guaranteed that it will have come through when you ask for it. You can pass arguments to that method to use to determine your conditions. All you need to do for that is use promise.then in the method and resolve the promise with the modified data. Since that method is returning the promise already, the modification will be updated on the resolve. See all of this below and in the demo.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, myService) {
myService.getData(15).then(function(data) {
$scope.myData = data;
});
});
app.factory('myService', function($q, $timeout) {
//this code only runs once when you first inject the service
//get data immediately
var deferred = $q.defer();
$timeout(function() { //simulate ajax call
var data = { //ajax response data
foo: 15,
bar: 'Some data!'
};
data = modifyData(data, 1);
deferred.resolve(data);
}, 500);
function modifyData(data, fooVal) {
if (data.foo === fooVal) {
data.baz = 'Conditional data!';
}
return data;
}
var myService = {
//data can be modified when it comes from the server,
//or any time you call this function
getData: function(fooVal) {
if (fooVal) { //if you want to modify the data
deferred.promise.then(function(data) {
data = modifyData(data, fooVal);
deferred.resolve(data);
});
}
return deferred.promise;
}
};
return myService;
});