Question

我刚开始学习angularjs，我已经花了4个小时就完成了这个，但我仍然不知道出了什么问题。

我有一项服务从服务器获取一些数据。

Service.js

(function() {
  "use strict";
  angular.module('appName')
       .service('MyService', function($http, $q, $location) {        
          var service = this;
          service.data = false;

          var deferred = $q.defer();

          //makes the api call to get that data
          service.load = function() {
            $http({
              method: 'GET',
              url:'/url',
              headers: { 'Content-type': 'application/json' },
              cache: false
            })
            .then(function(response) {
              service.data = response.data;
              deferred.resolve(service.data);
            },function() {
              deferred.reject("Failed to get data");
            });

            return deferred.promise;
          };

          //checks if the data has already been loaded. If not, load it...
          service.loaded = function() {            
            if (!service.data) {
              service.load()
              .then(function(response) {
                  deferred.resolve(response);
                }, 
                function(response) {
                  deferred.reject("Failed to load data");
                }
              );
            }
            else {
              console.log('Already have data');  
            }

            return deferred.promise;
          };

          //reset the data (for when we log out)
          service.destroy = function() {
            service.data = false; 
          };


        return {
          loaded: service.loaded,
          destroy: service.destroy,
          getStuff: function () {
            return service.data.stuff;
          }
        };

     });
})();

在我的控制器中，我这样称呼服务

Controller.js

(function() {
  "use strict";
  angular.module('appName')
         .controller('MyController', function($scope, $http, MyService) {
            var controller = this;

            $scope.stuff = [];

            MyService.loaded()
                      .then(
                        function(response) {
                          $scope.stuff = MyService.getStuff();
                          controller.init();
                        }, 
                        function(response) {
                          console.log('Error', 'Could not get customers');  
                        });


            controller.init = function() {
              // do something;
            };

         });
})();

以下是我的应用程序的一些背景知识。

第一个屏幕 用户输入用户名和密码并向服务器发送查询。如果服务器返回true，则用户将通过$location.url('url');重定向到应用程序。

第二个屏幕 控制器出现在屏幕上，呼叫Service。 Service返回data并正确填充Controller。

到目前为止一切正常。

当我点击我的退出按钮时，我会销毁data中的service。

当我使用其他用户名和密码重新登录时，即使我在控制台中看到服务器发送了正确的json，我仍然会显示前一个用户的data。好像service.data第二次没有得到更新。 .service是单身人......可能需要重置deferred = $q.defer();吗？

请注意，如果我在第二个屏幕上刷新浏览器（登录后），我会看到正确的信息。

我感谢任何帮助。

Answer 1

service.loaded是错误的逻辑，如果加载，则使用数据创建延迟解析，否则返回load（）本身：

service.loaded = function() {            
    if (service.data) {
       var deferred = $q.defer();
       deferred.resolve(service.data);
       return deferred.promise;
    } else {
       return service.load();
    }
};

我会保持＆＃39; var deferred = $ q.defer（）;＆＃39;每个服务方法中的单独实例，不要在所有服务调用中共享。

Answer 2

可能是deferred = $ q.defer（）;需要重置吗？

是的，您只是在应用程序的生命周期中创建一个实例而不是每个api调用的实例。

事实上，使用$q进行$http来电是完全没有必要的，并被视为蚂蚁模式。

首先让我们使用$q进行修复，以便它可以正常工作。您需要为每次使用创建一个新的promise对象：

var deferred = $q.defer(); // your one time only object

//makes the api call to get that data
service.load = function() {

应该是：

//makes the api call to get that data
service.load = function() {
   // new deferred object each use
   var deferred = $q.defer();

然而$http本身会返回一个承诺，所以你真正需要的是return $http没有创建新承诺：

 service.load = function () {
     // return the $http promise
     return $http({
         method: 'GET',
         url: '/url',
         headers: {
             'Content-type': 'application/json'
         },
         cache: false
     }).then(function (response) {
          service.data = response.data;
          // instead of `deferred.resolve()` return the data
          return service.data
     }, function () {
         // error handling code
     });
 };

对于loaded()方法，每次都要创建一个新的$q

服务返回未发现的数据

2 个答案: