Nesting promises with $http in AngularJS 1.0.7

Question

I´m trying to understand how promises work in Angular 1.0.7, but the syntax and the concept are difficult to me. I created a related previous post Nesting promises with $resources in AngularJS 1.0.7 that is working fine. However, when I try to do the same but replacing the $resource with an $http service, then it´s not working for me as expected.

The code never wait for the promise to come and I don´t get any result.

I attach the code:

// URL has to be parsed to get the destination, language and boatType       
var parseURL = function() {
    var language = $routeParams.language;
    var url = $location.path();

    var deferred = $q.defer();
    var promise = deferred.promise;
    promise.then(function success(result) {
        var destination = result;
        console.log("destination:" + destination);
        searchBoats(destination);
    });

    parseDestination(url, language).then(deferred.resolve);
};
parseURL();

var parseDestination = function(url, language) {
    console.log("parseDestination.begin");
    var departure = UrlService.parseUrlDeparture(url);

    var deferred = $q.defer(),
        promise = deferred.promise;
    TranslationService.getTranslatedDeparture(departure, language, API_SERVER_URL, deferred.resolve, deferred.reject);
    return promise;
};


// The function in the service
getTranslatedDeparture: function(destination, language, api) {
    var defered = $q.defer();
    var destinationPromise = defered.promise;
    $http.get("http://" + api + "/translatedDepartures?departure=" + destination + ";lang=" + language + ";matchStart=" + true).then(
        //var destination = result.data.map(function (source) { return source.element_translation; });
        defered.resolve
    );
    return destinationPromise;
}

To use angular 1.0.7 should not be a problem. We have a whole big website developed on it and it´s working perfectly. According to your second point, we are trying to re-factor the code, because we have many dependencies and many functions that are not following the single responsability rule. So, can you provide a working example that meets this rule? — Rober, Sep 26 '17 at 07:30
To migrate to a newer version of Angular is not an option this moment. There should be a softer approach to this problem, don´t you think? — Rober, Sep 26 '17 at 07:52
@Claies The question is in no way specific to Angular 1.0.7, so I don't see anything detrimental in answering it. — JLRishe, Sep 26 '17 at 07:56

score 2 · Accepted Answer · answered Sep 26 '17 at 07:51

You are using promises wrong in just about every way imaginable. Promises are intended to be chained and create new promises using .then(). And doing this will fix your bugs and cut the length of your code in half. As long as you have a promise to start with (which you do because $http.get returns a promise), you don't need, and shouldn't use, $q.defer():

// URL has to be parsed to get the destination, language and boatType       
var parseURL = function() {
    var language = $routeParams.language;
    var url = $location.path();

    parseDestination(url, language)
        .then(function (result) {
            var destination = result;
            console.log("destination:", destination);
            searchBoats(destination);
        });    
};
parseURL();

var parseDestination = function(url, language) {
    console.log("parseDestination.begin");
    var departure = UrlService.parseUrlDeparture(url);

    return TranslationService.getTranslatedDeparture(departure, language, API_SERVER_URL);    
};


// The function in the service
getTranslatedDeparture: function(destination, language, api) {
    var url = "http://" + api + "/translatedDepartures?departure=" + destination + ";lang=" + language + ";matchStart=" + true;

    return $http.get(url)
        .then(function (result) { return result.data; });  
}

Thanks for your helpful example. I love people who try to explain the problem and add a working example. However, my code is not working, I get Cannot read property 'then' of undefined in this line: parseDestination(url, language).then(function (result) {. Is it related to my angular version? — Rober, Sep 26 '17 at 08:12
@Rober Did you copy the code exactly as it's written without any changes? I don't see a way that `parseDestination()` could complete without an error but for there to be an error at the point you are describing. — JLRishe, Sep 26 '17 at 08:55
Should I create a promise with $q.defer if instead of $http I have a $resource? Could you please confirm if the solution in this post is ok? Or I´m in the same anti-pattern problem? https://stackoverflow.com/questions/46329186/nesting-promises-with-resources-in-angularjs-1-0-7 — Rober, Sep 26 '17 at 11:17

Nesting promises with $http in AngularJS 1.0.7

1 Answers1