AngularJS - Невозможно вызвать http serrvice с помощью factory

#javascript #angularjs #angularjs-service #angularjs-factory

#javascript #angularjs #angularjs-сервис #angularjs-factory

Вопрос:

Чтобы решить мою проблему, я просмотрел множество статей на разных сайтах, но ни одна из них не разрешила ее. Я пишу простое приложение AngularJS. Я совсем новичок в Angular. Я написал фабричный метод, который вызывает службу $ http, которая получает данные из веб-api. Веб-api работает нормально и возвращает объект JSON, как и ожидалось.

Угловой код

  var app = angular.module("app", [])
            .controller("controller", function ($scope, WebFactory) {
                $scope.data = "data";
                $scope.error = "error";
                $scope.data=WebFactory.getData();

            })
            .factory("WebFactory", function ($http) {
                var obj = {};

                obj.getData = function()
                {
                    $http({
                        method: "GET",
                        url: "http://localhost:37103/api/employee",                      
                    }).then(function success(response) {
                        return response.data;
                    })
                    .then(function error(response) {
                        return response;
                    });
                    return 'No data';
                }
                return obj;

            });

HTML-код

  <body ng-controller="controller">

data: {{data}}
<br/>
error: {{error}}
<br />

Я потратил 2 дня, но до сих пор не знаю, почему он не работает.

1. вы видите какие-либо ошибки в консоли?

2. Привет @Sajeetharan, я не вижу никаких ошибок, написано «HTML1300: произошла навигация». Только.

3. Ваш метод getData не имеет особого смысла. $ http() возвращает обещание, которое будет разрешено при получении ответа. Его асинхронный вызов. Итак, из get data вы в любом случае возвращаете «Нет данных». Когда приходит ответ, вы просто обрабатываете его в обратном вызове, но впоследствии он не используется.

4. В fiddler он выдает мне объект JSON, когда я нажимаю на URL.

Ответ №1:

Попробуйте что-то подобное вместо этого:

 var app = angular.module("app", [])
            .controller("controller", function ($scope, WebFactory) {
                $scope.data = "data";
                $scope.error = "error";
                $scope.data = {}
                WebFactory.getData().then(function success(response) {
                        $scope.data = response.data;
                    });
            })
            .factory("WebFactory", function ($http) {
                var obj = {};

                obj.getData = function()
                {
                    return $http({
                        method: "GET",
                        url: "http://localhost:37103/api/employee",                      
                    })
                }
                return obj;
            });

Ответ №2:

Прежде всего, вам не хватает объявления ng-app

Во-вторых, вы неправильно используете обратный вызов then. Он принимает три параметра: обратный вызов с успехом, обратный вызов с ошибкой, наконец, обратный вызов. Поскольку первый затем завершает работу успешно, затем он выполняет второй обратный вызов, который всегда возвращает ответ, но я предполагаю, что это не так, и вы могли бы использовать функцию get, которая более проста в использовании. Это должно быть:

 $http.get("http://localhost:37103/api/employee").then(function(response){
     //Do something with successfull response
 },
  function(error){ //do something with the error});

Смотрите документацию о обещаниях

Наконец, вы имеете дело с обещаниями и асинхронным кодом, но возвращаете ответ или строку вместо обещания с результатом. Итак, getData() должен выглядеть следующим образом:

 obj.getData = function(){
   return    $http.get("http://localhost:37103/api/employee");
}

И используйте обратные вызовы then (success, error, finally) в контроллере или, если вы хотите предоставить значения для обратных вызовов error / finally в службе, вам следует использовать службу $ q

 obj.getData(){
 var deferred = $q.defer();
 $http.get(...).then(function(response){
      deferred.resolve(response.data);
   },
   function(error){
       deferred.reject("No Data");
   });
  return deferred.promise;
}

Конечно, вам пришлось бы предоставить сервис $ q для WebFactory

1. спасибо за ваш ответ, друг, проблема была с асинхронным вызовом, и Владимир предоставил решение, и с моей стороны все работает нормально.

2. И HTML, который я предоставил, был всего лишь частью страницы. Спасибо