How to fix when .then is found to not be a function?

Question

For my following code:

$http({
    method: "POST",
    url: applicationUrl + '/Order/GetTax',
    params: { ShippingId: shippreference },
    contentType: "application/json; charset=utf-8",
    dataType: "json"
}).success(function (data) {
    if (data != "ADDED_FAIL") {
        $scope.getTaxData = data;
        $scope.shippingHandling = data.TotalShipping;
        $scope.Tax = data.TotalTax;
        $scope.CouponSaving = data.Coupons.length == 0 ? null : data.Coupons[0].Amount;
        $scope.CouponSavingDesc = data.Coupons.length == 0 ? null : data.Coupons[0].Description;
    } else {
        $('#popLoader').hide();
        jAlert('Internal Technical Error. Please try again!');
        taxErrorFlag = false;
        return false;
    }
    $('#popLoader').hide();
}).error(function (x) {
    jAlert(x);
});

I upgraded my site to jquery-2.2.4.js and AngularJS v1.7.6. And got the following error:

TypeError: $http.get(...).success is not a function

To fix the error I replaced .success with .then I did this on the advice of this answer: $http.get(...).success is not a function

However, I then got the error.

  TypeError: $http(...).then(...).error is not a function

I am not sure what to do next...

"I upgraded my site to jquery-2.2.4.js" — jQuery 2.x is past end of life and doesn't get security updates. Don't upgrade to it. Upgrade to something supported. — Quentin, Jan 29 '19 at 20:39
I don't see a `.error` in the documentation : `$http.get('/someUrl', config).then(successCallback, errorCallback);` — Mark C., Jan 29 '19 at 20:40
Possibly related: https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6 They were deprecated and that post explains why! Good luck with your upgrades! — nstanard, Jan 29 '19 at 20:42

score -1 · Accepted Answer · answered Jan 29 '19 at 20:40

It's because .then takes two arguments, the success and the error callback. You are trying to call error() on the .then function, which throws an error. Try this:

$http({
    method: "POST",
    url: applicationUrl + '/Order/GetTax',
    params: { ShippingId: shippreference },
    contentType: "application/json; charset=utf-8",
    dataType: "json"
}).then(function (data) {
    if (data != "ADDED_FAIL") {
        $scope.getTaxData = data;
        $scope.shippingHandling = data.TotalShipping;
        $scope.Tax = data.TotalTax;
        $scope.CouponSaving = data.Coupons.length == 0 ? null : data.Coupons[0].Amount;
        $scope.CouponSavingDesc = data.Coupons.length == 0 ? null : data.Coupons[0].Description;
    } else {
        $('#popLoader').hide();
        jAlert('Internal Technical Error. Please try again!');
        taxErrorFlag = false;
        return false;
    }
    $('#popLoader').hide();
}, function (x) {
    jAlert(x);
});

How to fix when .then is found to not be a function?

1 Answers1