如何从 $http.get 请求中获取响应数据？ [复制]答案

【问题标题】：How to acquire response data from a $http.get request? [duplicate]如何从 $http.get 请求中获取响应数据？ [复制]
【发布时间】：2015-07-31 07:41:11
【问题描述】：

我有以下控制器。

spaModule.controller("galleryController", function($http, $scope) {
    var test;
    $http.get("resources/php/gallery.php").success(function(response){
        test = response;
    });
    console.log(test);
});

这个控制器向 PHP 文件发送一个 get 请求，该文件返回一些 JSON，其中包含我在某个目录中拥有的所有图像的文件名。我知道我可能应该为此使用服务，但我只会在一个控制器中使用此信息，因此我宁愿将其包含在此控制器中。

我需要将匿名函数内部的响应数据获取到控制器的范围内，以便我可以使用 JSON 数据创建一个画廊指令。

我添加到这个问题的代码是我尝试这样做的。我认为我的问题可能是 .success 函数有它自己的范围，或者可能是 $http 对象，所以我在“嵌套”范围内。也就是说，我需要将 JSON 移出匿名函数的范围，进入 .success/$http 的范围，然后从该范围进入控制器的范围。我不确定这是否是我的问题，或者是否是如何做到这一点。

如何将响应 JSON 获取到控制器的范围？

【问题讨论】：

标签： php json angularjs scope anonymous-function

【解决方案1】：

只需将其分配给$scope。本地 var 变量从来都不是 Angular 的“范围”，在回调内部或外部。

$http.get("resources/php/gallery.php").success(function(response){
    $scope.test = response;
});

如果您的意思是要对数据进行后处理，则需要在 success 回调中进行。由于操作是异步的，您示例中的 console.log 部分永远无法访问此数据。

$http.get("resources/php/gallery.php").success(function(response){
    // do whatever you need to do here
    var data = response.map(..);
    // then assign to $scope:
    $scope.data = data;
});

【讨论】：

我只是在谈论 JavaScript 变量的范围，而不是实际的 $scope 对象。我有一个子问题。我之前已经尝试过，但认为它不起作用。我想是因为我试图查看这样的数据：console.log($scope.test);。这会在控制台中返回“未定义”，但我可以毫无问题地在页面上调用 {{ test }}。这是为什么呢？
异步执行。调用console.log的时间和实际分配$scope.test的时间与你想象的相反。
嗯。我打算在外部页面上的 ng-repeat 指令中使用这些数据。如果我明白你在说什么，我不会按照典型的时间顺序排列命令。 console.log 在 AJAX 请求被完全处理之前被调用。如果这是真的，我的指令可能有问题，对吧？
不。对$scope 的任何和所有修改都会被视图指令反映和接收。这是 Angular 的基本概念之一。您可以随时根据需要修改$scope，视图也会相应更改。
没有。您的 console.log 没有显示任何内容的原因是基本的 Javascript，与 Angular 无关。阅读问题顶部指向的副本以了解这一点。了解了这一点后，正如我在回答中所展示的那样，简单地编写代码是没有问题的。您异步获取数据，在success 回调中将其分配给$scope，然后您的视图指令将获取它。

【解决方案2】：

如果合适，您可以将接收到的数据存储在您的范围内：

spaModule.controller("galleryController", function($http, $scope) {
   $http.get("resources/php/gallery.php").success(function(response){
       $scope.data = response;
   });
});

但这也许只有在数据不是很大的情况下才应该这样做。否则，您应该将其存储在其他地方并对其进行处理并仅在 $scope 上设置 ui 所需的值

【讨论】：

为什么我需要担心数据大小？

【解决方案3】：

spaModule.controller("galleryController", function($http, $scope) {
    $scope.test;
    $http.get("resources/php/gallery.php")
        .success(function(response){
            $scope.test = response;
        })
        .then(function() {
            // $scope.test is set
        });
    // $scope.test is not set yet due to the async $http.get function
});

在这里，您在成功函数中设置了 $scope.test。 Angular 会注意到范围已更新并为您完成工作。因此，您将能够在代码中的其他地方使用 $scope.test。小心异步功能。

我希望这能回答你的问题。

【讨论】：

【解决方案4】：

您忘记在控制器中注入依赖项

请更改控制器代码 sn-p 如下

spaModule.controller("galleryController", ['$scope','$http',function($scope,$http) {
var test;
 $http.get("resources/php/gallery.php").success(function(response){
    test = response;
});
console.log(test);

}]);

【讨论】：