Angular design pattern for self fulfilling promise

Question

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:) )

Answer 1

$q.when(data) returns a resolved promise.

$q.reject(data) returns a rejected promise.