如何使用 $http 服务请求 API 数据答案

【问题标题】：How to request API data with $http service如何使用 $http 服务请求 API 数据
【发布时间】：2016-03-25 23:49:20
【问题描述】：

我正在使用 Riot Games API 开发应用，但本示例使用 REST Countries API 完成。 https://restcountries.eu/rest/v1/alpha/co

我使用 MEAN.IO 堆栈，这是我的代码：

test.html

<html ng-app="lolData">
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

   <section id="center" ng-controller="summonerStats">
      <form ng-submit="search()">
        <div class="mdl-textfield mdl-js-textfield">
          <input class="mdl-textfield__input" type="text" id="summonerName" placeholder="Summoner Name">
          <label class="mdl-textfield__label" for="sample1"></label>
        </div>
        <input class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit" value="Search"/>           

      <p ng-show="show">
        {{ mystats.name }}
      </p>

    </form>
   </section>   
</body> 
</html>

test.js

'use strict';

var lolData = angular.module('lolData', []);
console.log("before controller");

lolData.controller('summonerStats', function($scope, $http) {        
   var url = "https://restcountries.eu/rest/v1/alpha/co";
   console.log("inside controller");
   $scope.show = false;       
   $scope.search = function() {                                                          
    $http.get(url)
    .success(function(response) {
        $scope.mystats = response;
        $scope.show = true;
        console.log("inside success controller");
    });
};                
});

当我刷新页面时，代码会一直执行到“控制器之前”console.log。它无法进入 lolData.controller。并在浏览器控制台中显示以下错误。

而且 html 不接受嵌入的 javascript 范围。

我错过了什么？

更新 1：

我在 codepen 中添加了 index.html：Index.html

还有代码笔中的 Header.html：header.html

【问题讨论】：

可以显示 index.html 吗？
是的，你在哪里插件 angular.js？
检查浏览器开发工具网络。听起来那个文件没有加载。没有显示 Angular 或您的应用脚本的脚本标签
我已经添加了 index 和 header html。每个都有不同的控制器，但与 ng-app 无关。

标签： javascript angularjs rest mean.io

【解决方案1】：

不确定这是否是您的问题，但自 v1.4.4 以来，$http.success（和$http.error）一直是depreciated。相反，对成功和错误使用回调函数

var url = "https://restcountries.eu/rest/v1/alpha/co";
$http.get(url).then(
  function successCallback(response) {
    $scope.mystats = response;
    $scope.show = true;
    console.log("inside success controller");
  }, function errorCallback(error) {
     console.log(error);
});

【讨论】：

更好地使用您的代码。我想要一些不被弃用的东西。但问题依然存在。

【解决方案2】：

您的响应对象并没有按照您的想法执行。

从angular's docs，您可以看到响应具有多个附加到返回对象的属性。

你想要

$scope.mystats = JSON.parse(response.data);

【讨论】：

JSON.parse(response.data) 没有改变；也许是因为 API 已经返回 JSON 了吧？
你在回调中做了console.log(response)吗？
是的，我做了，只显示 areq 错误。我认为这是关于以正确的方式声明的事情。但我不知道在哪里。我还将 ng-app 放在标签 . 内