api 호출의 $ scope 변수가 때때로 업데이트되지 않습니다.

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; 
     }, 
    } 

을});

위의 예에서는 성공한 경우 응답 개체의 data 속성으로 확인되는 약속을 만듭니다. 오류는 잘못된 응답의 응답 객체로 거부됩니다.

이런 식으로 약속을 얻는 이점은 오류가 있으면 약속 체인이 끊어지지 않는다는 것입니다. $q.defer()에 대한 거부를 제공하지 않으면 오류가 있고 메모리 누수가 발생할 때 $q.defer 약속이 중단됩니다.

Answer 2

defer 개체를 다시 사용할 수 없기 때문에 deferred 만들기를 함수 호출로 이동해야합니다.

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);