Javascript api调用中的$scope变量有时不'；t更新

因此，我试图在用户成功登录到外部API后显示一些数据

当我登录时，有时直到我刷新页面，数据才会正确更新；此外，这个bug似乎只有在完全刷新之后才会持续，并且我已经注销了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;
      },
    }
  });

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

我对此的指示如下（附带相关信息）

部分内容如下所示：

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

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

你好，{{playerBasic.first_name}
注销

你好，{{playerBasic.email}
注销

虽然我知道该用户存在name变量，但它有时会说：

“你好，” 而不是“你好，名字”

---

我不完全清楚为什么$scope没有改变。

您必须将

延迟的创建移动到函数调用中，因为您不能重用
延迟的对象

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
本身返回一个承诺，所以您的实现是多余的。您只需执行以下操作：
返回$http（getPlayerBasic）
您必须将
延迟的创建移动到函数调用中，因为您不能重用
延迟的对象

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
本身返回一个承诺，所以您的实现是多余的。您只需执行以下操作：
返回$http（getPlayerBasic）
无需使用
$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
承诺在出现错误时挂起，并将导致内存泄漏。
无需使用
$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
承诺在出现错误时挂起，并将导致内存泄漏。
此实现似乎（到目前为止）解决了我遇到的问题。我的实现中的内存泄漏问题。。。很高兴知道。从现在开始我将这样做：）这个实现似乎（到目前为止）解决了我的问题。我的实现中的内存泄漏问题。。。很高兴知道。从现在起我将这样做：）我同意并编辑了我的答案。最初的问题是“为什么这不起作用”，这就是原因。我同意并编辑了我的答案。最初的问题是“为什么这不起作用”，这就是原因。