如何从 Angular 中的 restful API 获取 JSON？

Question

我正在学习 angular，尝试使用来自此 restfullAPI 的 JSON 信息：

https://restcountries.eu/rest/v2/callingcode/{callingcode}

它显示国家列表及其信息...

REST 列表中有 300 个国家...

我需要浏览每个“{callingcode}”，但其中一些 return 错误 404，因为其中没有信息...

我该如何处理这个错误并让 for 循环继续运行？

我也不知道订阅方法中的箭头函数语法是否正确

这就是我的

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Pais } from 'src/app/entities/pais';


@Component({
selector: 'app-connector',
templateUrl: './connector.component.html',
styleUrls: ['./connector.component.css']
})

export class ConnectorComponent implements OnInit {

paises: Pais[] = [];

constructor(public http:HttpClient) { }

ngOnInit(): void {
this.getCountries();
}

getCountries(){
for(let i=0; i<=300; i++ ){ 
  
  return this.http.get<Pais[]>("https://restcountries.eu/rest/v2/callingcode" + i).subscribe(
    paises => {this.paises = paises
    console.log(this.paises)
    })
 }
}}

Answer 1

两种方式。

通过 rxjs Merge
只需删除 for 循环中的 return 关键字。让请求通过时分配paise，失败的请求paise应该为null。

Answer 2

首先

您需要将 300 个响应的总和压入 paises，您的代码将被最后一个覆盖。并删除 return!

   this.http.get<Pais[]>("https://restcountries.eu/rest/v2/callingcode" + i).subscribe(
        paises => {
          this.paises.push(paises)
          console.log(this.paises)
        },
        error => { console.error(error)
       });

我是你我会在服务中这样做，以便通过 DependencyInjection 在组件之间共享数据

箭头功能不错

Answer 3

使用forkJoin&catchError处理404错误

ngOnInit(): void {
  var codes = [];
  for (var i = 1; i <= 300; i++) {
    codes.push(i);
  }

  forkJoin(codes.map(c => this.getData(c)))
    .pipe(
      map(e => e.filter(d => !!d)),
      tap(results => console.log("Results", results))
    )
    .subscribe();
}

getData(code: number): Observable<any> {
  return this.http
    .get<any>(
      "https://restcountries.eu/rest/v2/callingcode/" + code.toString()
    )
    .pipe(
      catchError(err => {
        if (err.status === 404) {
          return of(null);
        } else {
          throwError(err);
        }
      })
    );
}

StackBlitz example

如何从 Angular 中的 restful API 获取 JSON？

How can I obtain a JSON from a restful API in Angular?

rest

http

endpoint

angular