$ переменная scope из api call иногда не обновляется

Question

Итак, я пытаюсь отобразить некоторые данные после успешного входа пользователя в внешний API.

Когда я вхожу в систему, иногда данные не обновляются должным образом, пока я не обновляю страницу; Кроме того, эта ошибка, похоже, сохраняется только после полного обновления. И я вышел из API.

сервис так:

angular.module('myApp') 
    .service('PlayerAPICall', function ($http, $q) { 
    // AngularJS will instantiate a singleton by calling "new" on this function 
    var deferred = $q.defer(); 

    return { 
     getPlayerInfo: function() { 
     var getPlayerBasic = { 
      method: 'GET', 
      url: 'API_URL', 
      headers: { 
      'Accept': 'HEADER' 
      } 
     }; 

     // This API call returns some basic player information for the current logged in user. 
     $http(getPlayerBasic).success(function(response) { 
      deferred.resolve(response); 
     }); 

     return deferred.promise; 
     }, 
    } 
    }); 

Моя директива для этого, как это (С соответствующей информацией)

angular.module('myApp') 
    .controller('NavbarCtrl', function($scope, PlayerAPICall) { 

    // Declare $scope objects. 
    $scope.playerBasic; 

    PlayerAPICall.getPlayerInfo().then(function(response) { 
     $scope.playerBasic = response; 
    }); 

    }) 

Частичные выглядит следующим образом:

<div class='links-container'> 
    <div class='row'> 
     <div class='inputs'> 
     <form ng-submit='submit()'> 
     <p ng-show='playerBasic.first_name != null' class='md-text logout-container'> 
      Hello, {{playerBasic.first_name}} 
      <span class='logout-span'><button class='btn btn-primary logout-btn' type='submit' ng-model='submit'>Logout</button></span></p> 
     <p ng-show='playerBasic.first_name == null' class='md-text logout-container'> 
      Hello, {{playerBasic.email}} 
      <span class='logout-span'><button class='btn btn-primary logout-btn' type='submit' ng-model='submit'>Logout</button></span> 
     </p> 
     </form> 
     </div> 
    </div> 

Хотя я знаю, что для этого пользователя существует переменная имени, она иногда говорит:

'Hello,' Вместо 'Hello, name'.

Я не совсем уверен, почему масштаб $ не меняется.

Answer 1

Там нет необходимости производить обещание с $q.defer() как сервис $ HTTP уже возвращает обещание:

angular.module('myApp') 
    .service('PlayerAPICall', function ($http, $q) { 
    //var deferred = $q.defer(); 

    return { 
     getPlayerInfo: function() { 
     var getPlayerBasic = { 
      method: 'GET', 
      url: 'API_URL', 
      headers: { 
      'Accept': 'HEADER' 
      } 
     }; 

     //$http(getPlayerBasic).success(function(response) { 
     // deferred.resolve(response); 
     //}); 
     //return deferred.promise; 

     var promise = $http(getPlayerBasic); 
     var derivedPromise = promise.then(function(response) { 
      //return data to chain 
      return response.data; 
     }); 
     return derivedPromise; 
     }, 
    } 

});

В приведенном выше примере создается обещание, которое разрешает с помощью свойства данных объекта ответа в случае успеха. Ошибки отклоняются с объектом ответа ошибочного ответа.

Преимущество получения обещаний таким образом заключается в том, что цепочка обещаний не нарушается, если есть ошибка. Несоблюдение отказа от $q.defer() приведет к тому, что обещание $q.defer будет висеть при возникновении ошибок и создаст утечки памяти.

Answer 2

Вам нужно переместить создание deferred в вызов функции, потому что вы не можете повторно использовать объект defer.

return { 
    getPlayerInfo: function() { 
    var getPlayerBasic = { 
     method: 'GET', 
     url: 'API_URL', 
     headers: { 
     'Accept': 'HEADER' 
     } 
    }; 

    var promise = $http(getPlayerBasic); 
    var derivedPromise = promise.then(function(response) { 
     return response.data; 
    }); 
    return derivedPromise; 
    }, 
} 

Вы также не должны даже создать новое обещание, потому что $http возвращает само обещание, так что ваша реализация является излишней. Вы можете просто сделать: return $http(getPlayerBasic);