对端点进行 GET 并使用 Angular 打印数据答案

【问题标题】：Make a GET to an endpoint and print out data using Angular对端点进行 GET 并使用 Angular 打印数据
【发布时间】：2017-05-11 00:07:24
【问题描述】：

我正在尝试对我的端点进行 GET 并在我的页面中打印数据

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>



<div ng-app="myApp" ng-controller="myCtrl">

  <p>Data is:</p>
  <h1>{{myData}}</h1>

</div>



<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $http) {

    var promise = $http({
      method: 'GET',
      url: 'http://d.biossusa.com/api/distributor?key=*****',
      dataType: 'jsonp',
    });

    promise.success(function (data, status, header, config) {
      console.log("status is ", status);
      console.log(config.method + " data is: " + config.data);
      console.log("data is ", data);
      $scope.myData = response.data;

    });

  });

</script>

我一直得到

我希望将数据打印出来！

https://jsfiddle.net/bheng/b3rgh92v/

当我卷曲这个网址时：http://d.biossusa.com/api/distributor?key=*****

我得到了很好的结果！

我在 angular 上做错了什么？有什么提示吗？

【问题讨论】：

您是在 html 中添加脚本的引用还是全部内联？

标签： javascript angularjs

【解决方案1】：

几个观察：

1)：如果您使用外部文件（在其中创建角度模块），请确保您已在 html 中添加脚本文件的引用。

2)：从您的作业中删除响应

$scope.myData = response.data;  //response is undefined, so remove it

应该是

$scope.myData = data;

3) 最后，确保您被允许调用该端点 [我收到一条错误消息，说我无法从 plnkr 的 HTTPS 端点调用 http 端点，因此我更新了 GET URL]。我在 plunker 中使用不同的 URL 尝试了您的代码，并且在上述更改中运行良好。这里是plnkr link

【讨论】：

【解决方案2】：

JsFiddle javascript 设置加载类型 = No wrap - in <body>
删除 javascript 块中的 <script> 标记
将response.data 更改为data
在http 中加载JsFiddle，因为您的端点只允许http

    var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $http) {
    
    var promise = $http({
          method: 'GET',
          url: 'http://d.biossusa.com/api/distributor?key=*****',
          dataType: 'jsonp',
        });
    
        promise.success(function (data, status, header, config) {
          console.log("status is ", status);
          console.log(config.method + " data is: " + config.data);
          console.log("data is ", data);
          $scope.myData = data;
        });    
      });

http://jsfiddle.net/b3rgh92v/15/

【讨论】：

【解决方案3】：

1) 首先从javaScript 中删除脚本标签。如果你想使用
带有脚本标记的角度代码然后像我在下面那样将其放入 html 文件中。但是您应该将角度代码保存在单独的文件中。

2) 数据很大，这就是加载需要时间和成功块需要时间的原因大约执行 30 秒。在 html 中打印数据时也是如此角度需要几秒钟。

3) 使用$scope.myData = data; 而不是$scope.myData = response.data;，因为数据是在数据参数中接收到的，而不是响应（响应不在参数中）

4) 当您在 https 域中时，您无法进行 http 调用。在 http 中加载你的 jsfiddle 然后你就可以进行 http 调用了。

您的代码没有任何问题。我做了一些必要的更改，请参见下面的代码。工作中的 plnkr here

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>

  <body>
   <div ng-app="myApp" ng-controller="myCtrl">

  <p>Data is:</p>
  <p>{{myData}}</p>

</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $http) {

    $http({
      method: 'GET',
      url: 'http://d.biossusa.com/api/distributor?key=*****', 
      dataType: 'jsonp',
    }).then(function (successResponse) { 
      debugger 
      $scope.myData = JSON.stringify(successResponse.data);
            console.log("successResponse", successResponse.data);
        }, function (error) {
             $scope.myData = {};
             console.log('error',error)
        });

  });
  </script>
  </body>
</html>

上面的代码运行良好，但您也可以考虑使用 then 而不是 success。为什么？见下文。

success() 是如何实现的如果我们查看 Angular 的源代码here 我们可以看到成功基本上是：

promise.success = function(fn) {
// ...
promise.then(function(response) {
    fn(response.data, response.status, response.headers, config);
});
return promise;
};

所以它就像 then() 一样，但是解构了响应对象。这本质上只是语法糖，因此您将拥有一个回调，该回调将 JSON 对象作为其第一个参数返回，并且您无需自己访问 response.data。来自source。只是谷歌，你会得到更多。

【讨论】：

【解决方案4】：

我将您的示例复制并粘贴到 plunkr 中，它工作得很好（除了它不会因为 CORS 生成您的 ajax）。

https://plnkr.co/edit/oEkv3vgkotjJhVFrSvu2?p=preview

您还需要从小提琴的 javascript 窗口中删除 <script> 标签

我查看了您的 jsFiddle，注释掉了 javascript，但控制台仍然说存在一个奇怪的注入器错误。

【讨论】：

我有你建议的 plunk，我看不到它打印出来。你可以在这里看到它：plnkr.co/edit/oEkv3vgkotjJhVFrSvu2?p=preview
对此的任何进一步建议将不胜感激！
@ihue plunkr 刚刚开始角跑。由于 CORS，数据不会打印。您必须在您的服务器上启用它。我不确定您将什么用于服务器端代码，所以我建议您使用谷歌搜索。之后它应该可以工作了。
我正在使用 Nginx。你知道吗？
@ihue 这篇文章涵盖了这一点：stackoverflow.com/questions/14499320/…

【解决方案5】：

我在 fiddle 上阅读了您的代码并发现了一些问题

1。 Angular 模块未找到问题

在您的示例中，您在脚本操作中添加了<script> 标签。您不需要在该 saction 中添加 <script> 标签，因为它已经在 <script> saction 中添加。

您的 JavaScript 代码也运行 onload 事件，因此当角度引导时，模块不可用。因此，通过右上角的 JavaScript 部分中的 JavaScript 设置将其更改为 No wrap - in <body>。

2。从`https` 服务器调用`http` 服务器的请求

错误：混合内容：“https://jsfiddle.net/b3rgh92v/”处的页面是通过 HTTPS 加载的，但请求了不安全的 XMLHttpRequest 端点“http://d.biossusa.com/api/distributor?key=*****”。此请求已被阻止；内容必须通过 HTTPS 提供。

您可以从非https 服务器调用https 请求，但不能从https 服务器调用非https 服务器请求。您只需要从https 向https 服务器请求

我已将 url 更改为 https 服务器上的另一个测试 api。它工作正常。

您可以在 https://jsfiddle.net/b3rgh92v/11/

【讨论】：

【解决方案6】：

根据您的JSFiddle 的一些观察：

将 LOAD TYPE 从 onLoad 更改为 No wrap - in <head>。
无需在小提琴中包含jQuery 作为External Resources。
从 fiddle 的 JAVASCRIPT 部分中删除脚本 start<script> 和 end</script> 标记。
由于 JSON 通过 http 协议执行，而 JSFiddle 通过 https 协议执行。因此，如果代码通过 JSFiddle 执行，您将收到以下错误。

混合内容：“https://jsfiddle.net/bheng/b3rgh92v/”处的页面通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点“http://d.biossusa.com/api/distributor?key=*****”。此请求已被阻止；内容必须通过 HTTPS 提供。

更新 JSFiddle ： https://jsfiddle.net/b3rgh92v/9/

【讨论】：

是的，由于协议不同，CORS 问题不会显示结果。我已经在回答中提到了。

1。 Angular 模块未找到问题

2。从https 服务器调用http 服务器的请求

2。从`https` 服务器调用`http` 服务器的请求