Как получить ответ от 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) я начал получать ошибки, и через некоторое время выяснил, что синтаксис обещания изменился. Поэтому я попытался изменить его и обновил мой 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 не былне возвращаю данные обратноМетод ontrollers.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 возвращает новое обещание , которое разрешается или отклоняется с помощью возвращаемого значения successCallback, errorCallback (если только это значение не является обещанием, в этом случае оно разрешается со значением, которое разрешено в этом обещании, используя цепочку обещаний .

Для получения дополнительной информации см.

• AngularJS $ q Справочник по API службы - API Promise
• Вы упускаете суть обещаний

Answer 2

Возврат внутрь initialIndexLoad

, поэтому

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

Возможно, это так, возможно, оно потеряно во время рефакторинга / обновления.