Migrating $http request to AngularJS V1.6

Question

I upgraded my angularjs package to 1.6.3 and found out that the .success and .error functions ~~got deprecated~~ are removed. Now after using .then and .catch, only the .catch executes. I'm struggling to find out why the request fails this time around.

My initial working code was:

if ($scope.IsDinamicReport) {
            $http({
                method: "POST",
                url: "/api/DynamicReport/Post?pageNumber=" + $scope.PageNum + "&orderbyColumn=" + $scope.orderByColumn + "&sortOrder=" + $scope.sortOrder
                    + "&showNumberPagingStats=" + $scope.showNumberPagingStats,
                contentType: "application/json",
                data: $scope.report
            }).success(function (result) {
                angular.copy(result, $scope.dynamicReport);

                if (!$scope.dynamicReport.Error) {
                    $scope.HideDynamicRepFunctions = false;
                    $scope.exportColumnSelected = $scope.dynamicReport.Columns[0]; //Set default for export drop down
                    //TABLE SIZING
                    var persentage = $scope.returnTableSizing(result.Columns.length);

                    $('[data-table=container]')
                        .css('margin-left', '25px')
                        .css('padding-right', '25px')

                        .css('width', persentage)
                        .css('max-width', persentage);  
                }
                else
                    alert("Error occured while generating the report, please contact helpdesk.");

            }).error(function (data) {
                alert("An error occured while generating the report, please try again.");
            });
        }

and then I changed it to the following:

if ($scope.IsDinamicReport) {
            $http({
                method: "POST",
                url: "/api/DynamicReport/Post?pageNumber=" + $scope.PageNum + "&orderbyColumn=" + $scope.orderByColumn + "&sortOrder=" + $scope.sortOrder
                    + "&showNumberPagingStats=" + $scope.showNumberPagingStats,
                contentType: "application/json",
                data: $scope.report
            }).then(function (result) {
                angular.copy(result, $scope.dynamicReport);

                if (!$scope.dynamicReport.Error) {
                    $scope.HideDynamicRepFunctions = false;
                    $scope.exportColumnSelected = $scope.dynamicReport.Columns[0]; //Set default for export drop down
                    //TABLE SIZING
                    var persentage = $scope.returnTableSizing(result.Columns.length);

                    $('[data-table=container]')
                        .css('margin-left', '25px')
                        .css('padding-right', '25px')

                        .css('width', persentage)
                        .css('max-width', persentage);  
                }
                else
                    alert("Error occured while generating the report, please contact helpdesk.");

            }).catch(function (data) {
                alert("An error occured while generating the report, please try again.");
            });
        }

How do I go about debugging what went wrong if you cannot see the error here already? The only thing I changed there is just the deprecated functions

georgeawg · Accepted Answer · 2017-04-11 00:49:04Z

Use the standard .then and .catch promise methods instead, but note that the method signatures and return values are different:

Before:

$http(...)
  .success(function onSuccess(data, status, headers, config) {
  // Handle success
  //...
}).error(function onError(data, status, headers, config) {
  // Handle error
  //...
});

After:

$http(...)
  .then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    //...
    return <some value>;
}).catch(function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    //...
    throw <some error>;
});

For more information, see AngularJS Developer Guide - Migrating from 1.5 to 1.6

In the case of your code, the result value is a property of the response object:

$http({
    method: "POST",
    url: "/api/DynamicReport/Post?pageNumber=" + $scope.PageNum + "&orderbyColumn=" + $scope.orderByColumn + "&sortOrder=" + $scope.sortOrder
        + "&showNumberPagingStats=" + $scope.showNumberPagingStats,
    contentType: "application/json",
    data: $scope.report
//}).success(function (result) {
}).then(function (response) {
    //RESULT is a property of response
    var result = response.data;
    angular.copy(result, $scope.dynamicReport);

    if (!$scope.dynamicReport.Error) {
        $scope.HideDynamicRepFunctions = false;
        $scope.exportColumnSelected = $scope.dynamicReport.Columns[0]; //Set default for export drop down
        //TABLE SIZING
        var persentage = $scope.returnTableSizing(result.Columns.length);

Santosh · Accepted Answer · 2017-04-10 14:41:34Z

0

use debugger; in your source code . press F12 , F8 , F10 .it will help

answered Apr 10, 2017 at 14:41

Santosh

2971 gold badge4 silver badges15 bronze badges

Comments

Karim · Accepted Answer · 2017-04-10 14:57:40Z

0

From the angular doc the $http service return a promise that has two callback, of success and of failure (no catch method).

In your code you're trying to handle the rejection with a catch, but this is not reported in the doc.

This is the syntax provided, try to modify your code accordingly.

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

source: https://docs.angularjs.org/api/ng/service/$http

answered Apr 10, 2017 at 14:57

Karim

8,6823 gold badges27 silver badges36 bronze badges

Collectives™ on Stack Overflow

Migrating $http request to AngularJS V1.6

3 Answers 3

Before:

After:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Before:

After:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related