How to reject or stop going further in a chain of AngularJS promises?

Question

I have two functions which return calls to AngularJS' $http.post. The two functions are savePart1() & savePart2()

savePart1 = (): IPromise<any> => {
    return $http.post(....)
}

savePart2 = (): IPromise<any> => {
    return $http.post(....)
}

I am trying to not callPart2() if savePart1() fails. I did something like this:

this.savePart1().then((response1) => {
    if (response1.status !== 200)
        // don't call savePart2()
        this.savePart2().then((response2) => {
            if(response1.status === 200)
            //display success message when both calls succeed
        }):
}), (error) => {
   //handle error;
}).finally();

My question is how to cancel from calling savePart2() if the response from savePart2() did not return status of 200 (not necessarily an error). IPromise doesn't seem to have a reject method. Do I just return from the first promise?

Also my goal is to display a success message when both calls succeed. Is my syntax the best way to do this. I would like to add an error handler when any call fails.

"*I am trying to not callPart2() if savePart1() did not return status of 200*" - that's exactly what you are doing, nothing wrong with that `if` statement. Or did I misunderstand what you are looking for? — Bergi, Feb 03 '19 at 19:41

Bergi · Answer 1 · 2019-02-03T19:50:43.137

It seems like you mostly achieved what you want already. To make the finally wait for the second call, you should return the inner promise from the then callback though.

this.savePart1().then(response1 => {
    if (response1.status !== 200)
        return this.savePart2().then(response2 => {
//      ^^^^^^
            if (response1.status === 200)
                … // display success message when both calls succeed
            else
                … // handle non-200 status from call 2
        }, error => {
            … // handle error from call 2
        });
    else
        … // handle non-200 status from call 1
}), error => {
   … // handle error from call 1
}).finally(…);

To use a common handler for the errors, you would switch from .then(…, …) to .then(…).catch(…):

this.savePart1().then(response1 => {
    if (response1.status !== 200)
        return this.savePart2().then(response2 => {
            if (response1.status === 200)
                … // display success message when both calls succeed
            else
                … // handle non-200 status from call 2
        });
    else
        … // handle non-200 status from call 1
}).catch(error => {
   … // handle errors from both calls
}).finally(…);

You could even handle the unexpected status codes there by throwing exceptions:

this.savePart1().then(response1 => {
    if (response1.status !== 200)
        throw new Error("unexpected status "+response1.status);
    return this.savePart2().then(response2 => {
        if (response1.status !== 200)
            throw new Error("unexpected status "+response2.status);
        … // display success message when both calls succeed
    });
}).catch(error => {
   … // handle anything
}).finally(…);

And if you don't need both response values for displaying the success message, you could then even unnest the then calls.

How to reject or stop going further in a chain of AngularJS promises?

1 Answers1