时间戳

首页 > 解决方案 > 如何从 AngularJS $http.get().then() 获得响应

javascript - 如何从 AngularJS $http.get().then() 获得响应

问题描述

我最近开始从 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.

它不会抛出错误——它什么也不做。我很感激帮助解决这个问题！

标签： javascriptangularjs

解决方案

服务方法需要返回$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方法返回一个新的 PromisesuccessCallback ，该 Promise 通过,的返回值被解析或拒绝（除非该值是一个 Promise，在这种情况下，它使用在该 Promise 中使用Promise ChainingerrorCallback解析的值来解析。

有关详细信息，请参阅

推荐阅读