如何从.then返回承诺

Question

I want to be able to chain promises in order to make code synchronous. My problem is that depending on result of first $http request I could either be wanting to send another or not. In case if I choose not to send another $http request I don't need my second then() to do anything. But since my second then() doesn't know about all this and it's hanging there anyway so I figured I need to return from first then some fake dummy promise. But I would also like to recognize this case in second then() . I came up with returning $q.when('some value') from first case. Here is the code:

$http.get(url, params)
    .then(function(res) {
        res = res.data;
        if (res.status == 'ok' && res.rows.length > 0) {
            $scope.roomTypes = res.rows;
            return $q.when({ isDummy: true }); //in this case I don't need to send another request
        } else if (res.rows.length === 0 && $scope.request.roomType) {
            return $http.get(url2, params2); //make second request and return then`able promise
        }
    }, function(res) {
        throw 'Error';
    })
    .then(function(res) {
        res = res.data;
        if (res.status == 'ok') {
            var roomType = {
                room_type: res.roomType.id,
                description: res.roomType.description
            };
            $scope.roomTypes.push(roomType);
        } else if (res.isDummy) {
            //ok that's our dummy promise 
        } else {
            //format of response unexpected it means something went wrong
            throw "error";
        }
    }, funcrtion(res) {
        throw "some Error";
    })
    .catch(function(res) {...})
    .finally(function() {...});

The thing is I want to see value with which promise was resolved ({isDummy: true}), but how do I do that? I get undefined in my res parameter.

Answer 1

res will be undefined here

      .then(function(res) {
        res = res.data;
        ...

because there's no data property on {isDummy: true} object.

Answer 2

I think the basic issue here is confusing promises with promise handlers. The success handlers should return a value, not another promise. When you are in a promise success handler you are 'wrapped' by the promise mechanism which takes you returned value and passes it on to the next handler. This means your second promise does not see the initial response but what the first promise returned.

The value is processed as it goes along unless you pass it as is.

For example This all comes to that your line

return $q.when({isDummy: true});

Should be

return {isDummy: true};

The problem is the other case, where you want to continue to a next query. I would probably do one of the following: 1. Start in the first promise the handling (with the related logic from the first handler). 2. Pass on url2 and params - return({url: url2, params: params}) and handle them in the second promise.

Note the promise chanins can even break in the middle, if any of the handlers rejects, following success handlers will not be called, here is a simple example (make sure you open your devtools console to see the log).

Answer 3

Try to return any object except promise or deferred :) And its value will be passed to then . Like this:

return { isDummy: true };

Example code: https://jsfiddle.net/817pwvus/

From jQuery when documentation :

If a single argument is passed to jQuery.when() and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately. The doneCallbacks are passed the original argument.

Answer 4

If you want code sync, you can always write a long code block in the first then.

if you want to chain promise (Post:url1)->(Post:url2) and so on:

1.The return is useless. 2. Let's assume you have 2 $http promises you want to chain, both from a service called $users, for example, and they called GetUserAge and GetRelevantBars and the second query is based on the first one's results.

angular
 .module("moduleA")
 .controller("exmapleCtrl",exampleCtrl);

exampleCtrl.$injector=["$users"];

function exampleCtrl($users){
 var vm=this;

 vm.query = $users.GetUserAge().then( /*OnSuccess*/ GetUserAgeCB)

 //Callback of the GetUserAgeCB;
 function GetUserAgeCB(result){
  $users.GetRelevantBars().then( /*OnSuccess*/ GetRelevantBarsCB);
  /*continuation of CallBack code*/
 }


 //Callback of the GetRelevantBarsCB;
 function GetRelevantBarsCB(result){
  /*CallBack code*/
 }

}

hope this is understandable..

Answer 5

Instead of returning a dummy value and ignoring that explictly, you rather should nest and attach the second handler only to the promise that needs it:

$http.get(url, params)
.then(function(res) {
    var data = res.data;
    if (data.status == 'ok' && data.rows.length > 0) {
        $scope.roomTypes = data.rows;
        return; // do nothing
    } else if (res.rows.length === 0 && $scope.request.roomType) {
        return $http.get(url2, params2)
        .then(function(res) {
            var data = res.data;
            if (data.status == 'ok')
                $scope.roomTypes.push({
                    room_type: data.roomType.id,
                    description: data.roomType.description
                });
            else
                throw "error";  //format of response unexpected it means something went wrong
        });
    }
})
.catch(function(res) {…})
.finally(function() {…});