Angular Promises - Going from the triumph to the disappointment callback?

Question

Angular Promises - Going from the triumph to the disappointment callback?

It seems like I might be pushing the boundaries of what Promises were intended for, but nonetheless, here is what I am attempting to do:

$http.get('/api/endpoint/PlanA.json').then(
    function success( response ) {
        if ( response.data.isAllGood ) {
            $scope.myData = response.data;
        }
        else {
            // TODO HERE! Call the failure function!
        }
    },
    function failure() {
        $http.get('/api/endpoint/PlanB.json').then(
            function planBsuccess( response ) {
                $scope.myData = response.data;
            }
        );
    }
).then(function doOtherStuff() {});

This logic works fine when, for example, the PlanA endpoint returns a 404 or 500 error...but if it succeeds and the data is bad (e.g., isAllGood evaluates to false), I want it to trigger the failure callback. Is there a simple way to achieve this?

I have attempted to use $q.defer().reject and return that promise, but it only triggers the failure callback for doOtherStuff.

javascript angularjs angular-promise

Answer 1

Answer №1

A convenient approach is available for accomplishing this task. To successfully execute it, ensure that the failure callback is chained after the success callback, rather than beside it. Refer to When is .then(success, fail) considered an antipattern for promises? for a more comprehensive explanation.

$http.get('/api/endpoint/PlanA.json').then(function success(response) {
    if (response.data.isAllGood) {
        $scope.myData = response.data;
    } else {
        return $q.reject(); // trigger promise failure
    }
}).catch(function failure() { // handling errors from $http as well
    return $http.get('/api/endpoint/PlanB.json').then(function planBsuccess(response) {
//  ^^^^^^ importantly, wait for plan B before proceeding with doOtherStuff
        $scope.myData = response.data;
    });
}).then(function doOtherStuff() {});

An alternative method could be utilized to minimize code duplication in the $scope assignment:

$http.get('/api/endpoint/PlanA.json').then(function validate(response) {
    if (response.data.isAllGood)
        return response;
    else
        throw new Error("noGoodData");
}).catch(function failure() {
    return $http.get('/api/endpoint/PlanB.json');
}).then(function success(response) {
    $scope.myData = response.data;
    return doOtherStuff();
});

Answer 2

A convenient approach is available for accomplishing this task. To successfully execute it, ensure that the failure callback is chained after the success callback, rather than beside it. Refer to When is .then(success, fail) considered an antipattern for promises? for a more comprehensive explanation.

$http.get('/api/endpoint/PlanA.json').then(function success(response) {
    if (response.data.isAllGood) {
        $scope.myData = response.data;
    } else {
        return $q.reject(); // trigger promise failure
    }
}).catch(function failure() { // handling errors from $http as well
    return $http.get('/api/endpoint/PlanB.json').then(function planBsuccess(response) {
//  ^^^^^^ importantly, wait for plan B before proceeding with doOtherStuff
        $scope.myData = response.data;
    });
}).then(function doOtherStuff() {});

An alternative method could be utilized to minimize code duplication in the $scope assignment:

$http.get('/api/endpoint/PlanA.json').then(function validate(response) {
    if (response.data.isAllGood)
        return response;
    else
        throw new Error("noGoodData");
}).catch(function failure() {
    return $http.get('/api/endpoint/PlanB.json');
}).then(function success(response) {
    $scope.myData = response.data;
    return doOtherStuff();
});

Answer 3

Answer №2

Avoid it. It is not a good design choice. Here is a more straightforward alternative:

$http.get('/api/endpoint/PlanA.json').then(
    function success( response ) {
        if ( response.data.isAllGood ) {
            $scope.myData = response.data;
        }
        else {
             foo();
        }
    },
    function failure() {
        foo();
    }
).then(function doOtherStuff() {});

foo = function(){
  $http.get('/api/endpoint/PlanB.json').then(
        function planBsuccess( response ) {
            $scope.myData = response.data;
        }
   );
};

Having said that, I believe even this approach strays from the intended use of $http. A better practice would be something like

$http.get('/api/endpoint/PlanA.json').then(
    function success( response ) {
      $scope.myData = response.data;
    },
    function failure() {
        trueFailureFunc();
    }
).then(validateData());

validateData = function(){
    if ( response.data.isAllGood ) {
      $scope.myData = response.data;
    }
     else {
        getDataFromOtherSource();
    }
}

Answer 4

Avoid it. It is not a good design choice. Here is a more straightforward alternative:

$http.get('/api/endpoint/PlanA.json').then(
    function success( response ) {
        if ( response.data.isAllGood ) {
            $scope.myData = response.data;
        }
        else {
             foo();
        }
    },
    function failure() {
        foo();
    }
).then(function doOtherStuff() {});

foo = function(){
  $http.get('/api/endpoint/PlanB.json').then(
        function planBsuccess( response ) {
            $scope.myData = response.data;
        }
   );
};

Having said that, I believe even this approach strays from the intended use of $http. A better practice would be something like

$http.get('/api/endpoint/PlanA.json').then(
    function success( response ) {
      $scope.myData = response.data;
    },
    function failure() {
        trueFailureFunc();
    }
).then(validateData());

validateData = function(){
    if ( response.data.isAllGood ) {
      $scope.myData = response.data;
    }
     else {
        getDataFromOtherSource();
    }
}

Angular Promises - Going from the triumph to the disappointment callback?

Answer №1

Answer №2

Similar questions

Swap out the image for a div element if the image is not found

What is the best way to arrange the keys of a JavaScript object in a customized

Explore three stylish ways to showcase dynamic JavaScript content using CSS

"Discover the step-by-step guide for incorporating password reset functionality in AngularJS using UI router

Issue with preventDefault not functioning correctly within a Bootstrap popover when trying to submit a

Retrieving Ajax Data Using C#

Choose a procedure to reset to the original setting

Retrieving information from PHP using AJAX

Issues with Displaying Components Generated from an Array in JSX

JavaScript problem indicating an error that is not a function

The AngularJS $HTTP loop counter fails to update

Measuring data entries within JSON array utilizing JavaScript and Postman

Adaptive Container with Images that are not stretched to full width

What is the reason behind the continual change in the background image on this website?

Next.js version 14 is having difficulties displaying the loading.tsx file

ng-pattern for requiring whole numbers only with no decimal points

Issue with AngularJS 1.2.0-rc3 compatibility causing Angular-ui-bootstrap typehead to malfunction

What is the best way to differentiate between a JSON object and a Waterline model instance?

I'm currently attempting to establish a connection between my server.js express API and MongoDB, but I keep encountering an unfamiliar error message that I'm having trouble decipher

Encountered a "no login transports available" error while trying to use Firebase