Delay $http.get call without affecting angularjs promise

Question

Please note that I already read all the StackOverflow questions that are somewhat related to my questions but none of these really answer my question. Please don't mark this as duplicate without fully understanding my question.

Here's my concern:

I would like to delay angularJS $http.get call without affecting the angular promise. Right now the code below throws a "angular-1.3.15.js:11655 TypeError: Cannot read property 'then' of undefined" in this line:

updatedPromise = promise.then(function(price)

Here's my partial code:

MyAPP.service('FirstService', ['$q','$http', 'Constants', 'SecondService', 'UtilityService', function($q, $http, Constants, SecondService, UtilityService) {

    var self = this;

    var processFunction = function(AnArray) {

        var updatedPromise;
        var promises=[];

        angular.forEach(AnArray, function(itemObj, index) 
        {
            var totalWorth = "";

            if(itemObj.name != "")
            {
                var promise = SecondService.getPrice(itemObj.name);

                updatedPromise = promise.then(function(price){

                    itemObj.price = price;
                    return itemObj;

                }, function(error){

                    console.log('[+] Retrieving price has an error: ', error);

                });

                promises.push(updatedPromise);
            }
            else
            {
                console.log("Error!");
            }

        });

        return $q.all(promises);
    };
);


MyAPP.service('SecondService', ['$timeout','$http', 'Constants', function($timeout, $http, Constants) {

    var self = this;
    var URL = "/getPrice";

    self.getPrice = function(itemName){

        $timeout(function(){

            var promise;

            promise = $http({
                url: URL,
                method: 'POST',
                data: {_itemName : itemName},
                headers: {'Content-Type': 'application/json'}
              }).then(function(response) {
                return response.data;
                }, function(response) {
                console.log("Response: " + response.data);
                return response.data;
               });
            return promise;

        }, 3500);

        console.log("[-]getPrice");
    };

}]);

Please note that the processFunction should really return an array of promises because this is needed in other functions.

Your help will be highly appreciated!

Let me know for further questions/clarifications.

Thanks!

Just do `return $timeout(function(){` to make your chain promise working neatly :) — Pankaj Parkar, May 24 '17 at 20:36

Frank Modica · Accepted Answer · 2017-05-24T20:46:47.167

$timeout returns a promise, so you can return that, and then return the promise from $http:

self.getPrice = function (itemName) {
    return $timeout(3500).then(function () {
        return $http({
            url: URL,
            method: 'POST',
            data: { _itemName: itemName },
            headers: { 'Content-Type': 'application/json' }
        });
    }).then(function (response) {
        return response.data;
    }, function (response) {
        console.log("Response: " + response.data);
        return response.data;
    });
};

Delay $http.get call without affecting angularjs promise

1 Answers1