Angular JS：访问在 $http.get 块中定义的 $scope.variable 以在另一个 $http.get 中使用答案

【问题标题】：Angular JS: Accessing a $scope.variable defined inside a $http.get block to use in another $http.getAngular JS：访问在 $http.get 块中定义的 $scope.variable 以在另一个 $http.get 中使用
【发布时间】：2014-05-01 21:26:07
【问题描述】：

现在，我在在线 json 数据源上使用 $http.get。在我的控制器中：

$http.get('source').success(function(data) {
  $scope.nextPageToken = data.nextPageToken;
  $scope.prevPageToken = data.prevPageToken;
});

获取变量 $scope.nextPageToken 工作正常。我用于显示它的 HTML 代码（用于测试）

<p>{{nextPageToken}}</p>

有效，它在浏览器中正确显示。但是当我尝试在控制器中使用变量 $scope.nextPageToken

$http.get('source').success(function(data) {
  $scope.nextPageToken = data.nextPageToken;
  $scope.prevPageToken = data.prevPageToken;
});
$http.get('source&pageToken=' + $scope.nextPageToken).success(function(data) {
  $scope.picture = data.thumbnail.url;
});

控制台中的控制台返回错误请求 (400)。它似乎试图访问链接“source&pageToken=undefined”，这意味着 $scope.nextPageToken 没有得到评估或没有传递给 $http.get 参数。

这很奇怪，因为当我定义一个字符串变量并将其连接到 $http.get 参数的 URL 时，URL 是正确的。例如，当我尝试时它会起作用

this.key = 'someKey';
$http.get('source&key=' + this.key).success(function(data) {
  $scope.nextPageToken = data.nextPageToken;
  $scope.prevPageToken = data.prevPageToken;
});

这可能是因为我试图访问一个只能在 $http.get 函数块内访问的变量吗？如果是这样，我如何访问块外的 $scope.nextPageToken 变量？

感谢任何帮助。谢谢！

编辑（在 basilikum 的回答之后）：我也尝试过

this.someKey = 'stringKey';
$http.get('source&key=' + this.someKey).success(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
    $http.get('source&pageToken=' + $scope.nextPageToken + '&key' + this.someKey).success(function(data) {
        $scope.picture = data.thumbnail.url;
    });
});

（这是我拥有的实际代码的更具体示例）但是，当我这样做时，我得到的错误是

TypeError: Cannot read property 'someKey' of undefined

我已经尝试过嵌套在另一个 $http.get 中，但我完全得到另一个错误，所以我认为它只会造成更多问题。谁能告诉我这里发生了什么？

【问题讨论】：

因为你在函数外部使用的this和你在函数内部使用的this不一样。请阅读此（双关语并非有意）developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript angularjs http scope undefined

【解决方案1】：

您正在处理异步代码。当您发送第二个请求时，第一个请求尚未完成，因此尚未设置 nextPageToken 和 prevPageToken。一个简单的解决方案是将第二个请求放在第一个请求的成功函数中：

$http.get('source').success(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
    $http.get('source&pageToken=' + $scope.nextPageToken).success(function(data) {
        $scope.picture = data.thumbnail.url;
    });
});

【讨论】：

感谢您的帮助。我想我越来越近了，但我现在又遇到了另一个错误。请查看已编辑的问题。
阅读此问题的答案：stackoverflow.com/questions/3127429/javascript-this-keyword 您会看到，this 的含义因上下文而异。成功函数内部的this 与函数外部的this 不同。您可以只定义一个保存数据的变量 (var someKey = 'stringKey';) 或使用变量来保存 this (var that = this; that.someKey = 'stringKey';) 的状态。

【解决方案2】：

@basilikum 是对的，但你可以像这样链接你的函数：

$http.get('source')
  .then(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
    return $http.get('source&.pageToken=' + $scope.nextPageToken)
  }).then(function(data) {
    $scope.picture = data.thumbnail.url;
  });

Angular 允许将 Promise 链接起来，这样你就可以摆脱所有丑陋的嵌套。您所要做的就是从每个then 调用中返回一个承诺。

【讨论】：