IONIC - 访问 API答案

【问题标题】：IONIC - accessing to APIIONIC - 访问 API
【发布时间】：2018-08-01 17:06:34
【问题描述】：

我想通过 API 访问数据。但是我的应用程序没有收到任何数据。有人能帮助我吗？来自提供者/休息的代码：

      getAnimes() 
  {
    var url ='https://akihabara.cz/api/api.php?co=%7B"hledat"%3A%7B"text"%3A"s"%2C"kde"%3A"dorama"%7D%2C"prihlaseni"%3A%7B"token"%3A"xxx"%7D%7D';
    var response = this.http.get(url).map(res => res.json());
    return response;
  }

当我将它写入浏览器时，它会生成数据，但我的应用程序不会。来自 home.ts 的代码：

export class HomePage {
  animes: Array<any>;

      constructor(public navCtrl: NavController, public restProvider: RestProvider, public alertCtrl: AlertController) {
        this.getAnimes();
      }
      getAnimes() {
        this.restProvider.getAnimes().subscribe((data)=>{this.animes = data;
        });
      }
    }

最后来自 home.html 的代码：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Anime</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let anime of animes">
      <h2>{{anime}}</h2>
      <p>{{anime.nalezeno}}</p>

    </ion-item>
  </ion-list>
</ion-content>

来自浏览器的数组： "nalezeno":{"pocet":2,1:{"id":541, "nazevjap":"Hassai-sensei","pristupnost":"0"},2:{"id":3236, "nazevjap ":"Ssairen","pristupnost":"0"}};

【问题讨论】：

标签： json angular api ionic-framework get

【解决方案1】：

导入 rxjs 地图并使用 subscribe 方法，并且您的 api 有很多数据，因此您也可以为此使用分页并首先尝试使用 res.text() 因为根据浏览器响应它不是有效的 json 请使用此https://codebeautify.org/jsonviewer 链接为了验证 api 响应是否有有效的 json，现在先尝试使用 res.text() 来获取响应

   import 'rxjs/add/operator/map'; 

   this.http.get('https://api.fixer.io/latest?base=USD').map(res => 
        res.json()).subscribe(data => {
          console.info(data)
         },(reject) => {
           console.info(reject)
         })

如果您需要文本形式的数据，请使用 res.text()

如果您需要 json 格式的数据，请使用 res.json()

【讨论】：

【解决方案2】：

您的 URL 没有返回有效的 JSON，但您正尝试在

中将该数据转换为 JSON

map(res => res.json());

因此，当代码尝试将其转换为 JSON 时，此 res.json() 会引发错误。

并且由于您没有处理错误，因此您无法找到问题所在。

如果你使用以下代码

getAnimes() {
  this.restProvider.getAnimes().subscribe(
    (data) => {this.animes = data;
  }, error => {
    console.log(error);
});

您的代码将始终进入错误块。

解决方案：将响应更改为有效 JSON 或删除 => res.json()

【讨论】：