如何從AngularJS獲得響應$ http.get（）。then（）

Question

我最近開始從Bootstrap 3升級到Bootstrap 4，這要求我也從AngularJS 1.5.8升級到最低AngularJS 1.6.1。 我有一個簡單的AngularJS / MVC應用程序，具有以下代碼設置：

/scripts/app.js（包含路由）/scripts/controllers.js（包含控制器，方法調用等）/scripts/services.js（包含命中C＃控制器並帶回數據或執行操作的回調方法“（CRUD方法）

在我的controllers.js中，我有一個方法：

function init() {
    api.initialIndexLoad(
        function(result) {
            if (result.error) {
                notificationService.danger("<h5>An error occurred.</h5><h6>Details: {0}</h6>".format(result.error));
            } else {
                vm.dataList = result.theDataFromCSharp;
            }
            vm.loaded = true;
        }
    );
}

init();

這將調用我的services.js，其中包含以下代碼：

"use strict";

angular
.module("CustList.services", ["ngResource"])
.service("api",
    function api($resource, $http, notificationService) {
        function handleError(err, fn) {
            if (!fn) {
                notificationService.error(err);
            } else {
                fn(err);
            }
        }

        return {
            initialIndexLoad: function(callback, error) {
                $http.get("/Customers/InitialIndexLoad")
                    .success(callback)
                    .error(function(e) {
                        handleError(e, error);
                    });
            }
        };
    }
);

因此，當然，在將庫更新為AngularJS 1.6.1（實際上，我直接使用AngularJS 1.7.5）之后，我開始出現錯誤，並且過了一會兒才發現promise語法已經改變。 因此，我嘗試進行更改，並將我的services.js更新為：

"use strict";

angular
.module("CustList.services", ["ngResource"])
.service("api",
    function api($resource, $http, notificationService) {
        function handleSuccess(response) {
            return response.data;
        }

        function handleError(err, fn) {
            if (!fn) {
                notificationService.error(err);
            } else {
                fn(err);
            }
        }

        return {
            initialIndexLoad: function() {
                $http
                    .get("/Customers/InitialIndexLoad")
                    .then(handleSuccess)
                    .catch(handleError);
            }
        };
    }
);

錯誤消失了，我以為我完成了這次升級，直到意識到：我實際上並沒有找回數據！ 我創建的新handleSuccess方法正在獲取響應中的數據，但是return response.data並沒有將數據返回給我的controllers.js方法，因此我可以將其插入vm.dataList 。

它不會引發錯誤-它什么都不做。 非常感謝您幫忙解決此問題！

Answer 1

服務方法需要返回 $http承諾。

app.service("api",
    function api($http, notificationService) {
        function handleSuccess(response) {
            return response.data;
        }

        function handleError(err) {
            notificationService.error(err);
            throw err;
        }

        return {
            initialIndexLoad: function() {
                ̶$̶h̶t̶t̶p̶
                return $http
                    .get("/Customers/InitialIndexLoad")
                    .then(handleSuccess)
                    .catch(handleError);
            }
        };
    }
);

請注意， errorHandler需要重新引發錯誤。 否則，處理程序會將拒絕的承諾轉換為已實現的承諾。

該控制器需要使用.then和.catch方法：

function init() {
    var promise = api.initialIndexLoad();
    promise.then(function(result) {
       if (result.error) {
            notificationService.danger("<h5>An error occurred.</h5><h6>Details: {0}</h6>".format(result.error));
        } else {
            vm.dataList = result.theDataFromCSharp;
        }
        vm.loaded = true;
    }).catch(functions(err) {
        console.log(err);
        throw err;
    });
}

.then方法返回一個新的promise ，該新的promise將通過successCallback ， errorCallback的返回值進行解析或拒絕（除非該值是一個promise，在這種情況下，它將使用promise鏈接使用該promise中解析的值進行解析。

有關更多信息，請參見

• AngularJS $ q服務API參考-Promise API
• 您錯過了承諾的重點

Answer 2

返回initialIndexLoad內部

所以

return $http
                    .get("/Customers/InitialIndexLoad")
                    .then(handleSuccess)
                    .catch(handleError);

可能就是這樣，可能在重構/升級過程中丟失了。