javascript - 服务返回异常数据

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 中，我这样调用服务

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'); 重定向到应用。

第二屏幕 Controller 出现在屏幕上，调用 Service。 Service 返回 data 并且 Controller 被正确填充。

到目前为止一切正常。

当我点击注销按钮时，我销毁了服务中的数据。

当我使用另一个用户名和密码重新登录时，即使我在控制台中看到服务器已发送正确的 json，我仍然会看到来自前一个用户的 data。就好像 service.data 没有第二次更新一样。 .service 是单例...难道 deferred = $q.defer(); 需要重置吗？

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

感谢任何帮助。

Answer 1

could it be that deferred = $q.defer(); need to be reset?

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

事实上，使用 $q 调用 $http 是完全没有必要的，它被认为是一种 Ant 模式。

---

首先让我们使用 $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 本身会返回一个 promise，因此您真正需要的只是 return $http 而不是创建一个新的 promise:

 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