How to handle a call back hell in $http chaining?

Question

I have many $http requests as following:

        Scholarship.loadMaxAcademicYear().success(function (AcademicYearId) {
            if (AcademicYearId) {
                Scholarship.deleteAllCurrentData(data).success(function () {
                    Scholarship.copyDataToCurrentYear().success(function(){
                        Scholarship.getPromises(null, AcademicYearId).then(function () {
                            $scope.isSuccess = true;
                            $timeout(function () {
                                $scope.isSuccess = false;
                                $scope.isSubmit = false;
                                $scope.confirmModal.close();
                            }, 5000);
                        }, function(err){
                            importError();
                        });
                    }).error(function(){
                        importError();
                    })
                }).error(function(){
                    importError();
                });
            }
        }).error(function (err) {
            importError();                
        });

I want to reduce the error callback to be only one at the end as following:

        Scholarship.loadMaxAcademicYear().success(function (AcademicYearId) {
            if (AcademicYearId) {
                Scholarship.deleteAllCurrentData(data).success(function () {
                    Scholarship.copyDataToCurrentYear().success(function(){
                        Scholarship.getPromises(null, AcademicYearId).then(function () {
                            $scope.isSuccess = true;
                            $timeout(function () {
                                $scope.isSuccess = false;
                                $scope.isSubmit = false;
                                $scope.confirmModal.close();
                            }, 5000);
                        }
                    })
                })
            }
        }).error(function (err) {
            importError();                
        });

I'm thinking of using the async but Angular might have some way to handle this kind of problem. Would it be possible to do so in AngularJs?

Have you looked at [this question](http://stackoverflow.com/questions/15726377/how-to-chain-angular-http-get-calls?rq=1)? Seems to cover the same thing. — Ja͢ck, Mar 10 '15 at 05:38
Thanks Jack. I took a look at that question. It's very similar. However, in my case, each nested `$post` has to use data from the previous one. So, I have to find some way to chain them properly instead of using `$q`. — lvarayut, Mar 10 '15 at 06:10

JLRishe · Accepted Answer · 2015-03-10T06:27:37.960

You've still got a pyramid of doom even in your second example. The key here is to use the .then() method to allow promise chaining:

Scholarship.loadMaxAcademicYear().then(function(response) {
  var academicYearId = response.data;
  if (academicYearId) {
    return Scholarship.deleteAllCurrentData(academicYearId)
    .then(function() {
      return Scholarship.copyDataToCurrentYear();
    }).then(function() {
      return Scholarship.getPromises(null, academicYearId);
    }).then(function() {
      $scope.isSuccess = true;
      return $timeout(function() {
        $scope.isSuccess = false;
        $scope.isSubmit = false;
        $scope.confirmModal.close();
      }, 5000);
    });
  }
}).catch(function(err) {
  importError();
});

We can also shorten this a bit by using .bind():

Scholarship.loadMaxAcademicYear().then(function(response) {
  var academicYearId = response.data;
  if (academicYearId) {
    return Scholarship.deleteAllCurrentData(academicYearId)
    .then(Scholarship.copyDataToCurrentYear.bind(Scholarship))
    .then(Scholarship.getPromises.bind(Scholarship, null, academicYearId))
    .then(function() {
      $scope.isSuccess = true;
      return $timeout(function() {
        $scope.isSuccess = false;
        $scope.isSubmit = false;
        $scope.confirmModal.close();
      }, 5000);
    });
  }
}).catch(importError);

Thanks for your response. Do we need to add another callback function in each `.then` function in order to handle an error exception? — lvarayut, Mar 10 '15 at 05:57
@LVarayut No, the single `catch` there will catch any error that occurs in that entire promise chain. You can try it out for yourself by adding `throw Error` in various places. — JLRishe, Mar 10 '15 at 06:26

How to handle a call back hell in $http chaining?

1 Answers1