角嵌套承诺

Question

I'm really struggling to write a complex function in Angular that depends on promises. This is my first time writing a promise and I'm still not sure I fully understand how to do what I want to do with my code.

I have a variable var query = searchQuery.getQuery() in a controller ProfileNavCtrl . Then in my searchQuery service, getQuery fetches the value of localStorage.getItem('searchQuery') and checks if it's an empty string or null. If it's not empty or null, it simply returns the value to the controller. The value should be an array of slugs like ['foo','foo-bar','foo-bar-baz'] .

If it is null or empty, it executes an $http.get call to fetch a JSON object and parse it. This is where things break down for me. I need getQuery() to return the value from $http.get (if the initial value of query is null) so that the controller variable query is assigned that value. As it is now, query (in the controller) is always set to null or undefined.

The $http.get call also calls setQuery() so that the query is persisted and future calls are avoided.

Here is my controller:

app.controller('ProfileNavCtrl', ['$scope', '$http', '$location', '$q', 'searchQuery',
function($scope, $http, $location, $q, searchQuery){
    var query = searchQuery.getQuery;
// do something with query

And here is my service:

app.service('searchQuery', ['$http', '$timeout', '$q', function($http, $timeout, $q){
    var query = [];

    this.getQuery = new Promise(function(){
        var query = localStorage.getItem('searchQuery');

        if(query == "" || query == [""] || query == null){
            var slugArray = [];
            var query = $http.get('/companies.json')
            .then(function(resp) {
                if(resp && resp.data) {
                    for(var i in resp.data) {
                        var result = resp.data[i];
                        if(resp.data[i].name){
                            slugArray.push(resp.data[i].name.toLowerCase().split(' ').join('-'));
                        }
                    }
                    setQuery(slugArray);
                } else {
                    resetQuery();
                }
            }, function(err) {
                resetQuery();
            }).then(function(resp){
                return resp;
            })
            return query;
        } else {
            return query;
        };
    }).then(function(success){
        return success;
    });

UPDATE: 2nd Attempt Here is my controller code: var getQuery = searchQuery.getQuery();

getQuery.then(function(query){
    query = searchQuery.getQuery();
    // Check if user is on main site or portal
    if(location.pathname.split('/')[3] == null){
        var currentProfile = location.pathname.split('/')[1];
    } else {
        var currentProfile = location.pathname.split('/')[3];
    };

    // Get the next/prev query element (if any)
    console.log('6: ');
    console.log(query);
    var prev = query.slice(query.indexOf(currentProfile)-1)[0];
    var next = query.slice(query.indexOf(currentProfile)+1)[0];

    // Check if next/prev is undefined and if so, set to first/last element in query array
    if(prev){
        var prevProfile = prev;
    } else {
        var prevProfile = query.pop();
    };

    if(next){
        var nextProfile = next;
    } else {
        var nextProfile = query[0];
    };

    $scope.goToPrev = function() {
        // Check if user is on main site or portal
        if(location.pathname.split('/')[3] == null){
            var profileUrl = location.origin + '/' + prevProfile;
            // window.location = profileUrl;
            console.log(profileUrl);
        } else {
            var profileUrl = location.origin + '/' + location.pathname.split('/').slice(1,3).join('/') + '/' + prevProfile;
            // window.location = profileUrl;
            console.log(profileUrl);
        }
    };

    $scope.goToNext = function() {
        // Check if user is on main site or portal
        if(location.pathname.split('/')[3] == null){
            var profileUrl = location.origin + '/' + nextProfile;
            // window.location = profileUrl;
            console.log(profileUrl);
        } else {
            var profileUrl = location.origin + '/' + location.pathname.split('/').slice(1,3).join('/') + '/' + nextProfile;
            // window.location = profileUrl;
            console.log(profileUrl);
        }
    };
});

Here is my updated service: this.getQuery = function(){ return new Promise(function(){ var query = localStorage.getItem('searchQuery');

        if(query == "" || query == [""] || query == null){
            var slugArray = [];
            return $http.get('/companies.json')
            .then(function(resp) {
                if(resp && resp.data) {
                    for(var i in resp.data) {
                        var result = resp.data[i];
                        if(resp.data[i].name){
                            slugArray.push(resp.data[i].name.toLowerCase().split(' ').join('-'));
                        }
                    }
                    setQuery(slugArray);
                } else {
                    resetQuery();
                }
                return slugArray;
            }, function(err) {
                resetQuery();
            });
        } else {
            return query;
        };
    });
};

Answer 1

In Angular promises are provided through the $q service. See the documentation for more detail.

The basic outline to implement $q promise in your service is outlined below, I'll leave the detail on how to save to local storage etc to you:

this.getQuery = function(){
    var deferred = $q.defer();
    var query = localStorage.getItem('searchQuery');

    if(query == "" || query == [""] || query == null){
        $http.get('yoururl').then(function(resp) {
            // assuming resp is an array, else do your parsing to get array
            query = resp;
            deferred.resolve(query);
        }, function(err) {
            query = null;
            deferred.reject(err);
        });
    } else {
        deferred.resolve(query);
    };
    return deferred.promise;
};

You can then use this in your controller like:

var query = null;
searchQuery.getQuery().then(function(result) {
    query = result;
}, function(err) {
    // Error occured
});