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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从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

它不会抛出错误 - 它什么都不做。我很感激帮助搞清楚这一点!

答案

服务方法需要return $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需要re-throw错误。否则,处理程序会将拒绝的承诺转换为履行的承诺。

控制器需要使用.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,它通过successCallbackerrorCallback的返回值解析或拒绝(除非该值是一个promise,在这种情况下,它使用promise chaining在该promise中解析的值解析。

有关更多信息,请参阅

另一答案

返回initialIndexLoad

所以

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

猜测是这样,可能在重构/升级期间丢失了。

以上是关于如何从AngularJS获得响应$ http.get()。then()的主要内容,如果未能解决你的问题,请参考以下文章

如何从贝宝获得成功或失败响应?

从服务器端nodejs到angularjs的有限json响应

如何从angularjs获得天数

会话超时时,如何从 Spring Security 向 angularjs 应用程序发送响应?

如何从 angularjs 中的 JSONP 错误回调中获取数据?

AngularJS:如何获得系统远程?