如何通过国家名称而非 ISO2 代码显示世界银行 API 信息

本文旨在指导开发者如何使用世界银行 API，通过国家名称检索并显示国家信息，例如名称、首都、地区、收入水平、经度和纬度等。由于世界银行 API 主要通过 ISO2 代码进行查询，本文将介绍如何结合使用 API 和数据处理技术，实现通过国家名称进行查询的功能，并提供 Angular 示例代码。

世界银行 API 提供了丰富的国家数据，但通常使用 ISO2 代码作为主要查询参数。如果需要通过国家名称进行查询，一种常见的方法是先获取所有国家的信息，然后在客户端进行过滤。以下是一种实现方案：

1. 获取所有国家信息

首先，我们需要从世界银行 API 获取所有国家的信息。可以使用以下 API 端点：

http://api.worldbank.org/v2/country?format=json&per_page=300

注意：per_page=300 参数用于指定每页返回的国家数量，确保一次性获取所有国家信息。如果国家数量超过 300，可能需要进行分页处理。

2. 创建国家名称到 ISO2 代码的映射

获取所有国家信息后，我们需要创建一个国家名称到 ISO2 代码的映射。这可以通过遍历 API 返回的数据来实现。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, map } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class WorldbankService {
private apiUrl = 'http://api.worldbank.org/v2/country';
private countryCodeMap: { [key: string]: string } = {};
constructor(private http: HttpClient) { }
// 获取所有国家信息并创建映射
getAllCountries(): Observable<any> {
const url = `${this.apiUrl}?format=json&per_page=300`;
return this.http.get(url).pipe(
map((data: any) => {
const countries = data[1];
countries.forEach((country: any) => {
this.countryCodeMap[country.name.toLowerCase()] = country.iso2Code;
});
return this.countryCodeMap;
})
);
}
// 根据国家名称获取 ISO2 代码
getCountryCodeByName(countryName: string): string | undefined {
return this.countryCodeMap[countryName.toLowerCase()];
}
// 根据 ISO2 代码获取国家属性
getCountryProperties(countryCode: string): Observable<any> {
const url = `${this.apiUrl}/${countryCode}?format=json`;
return this.http.get(url);
}
}

在这个示例中，getAllCountries() 方法从 API 获取所有国家信息，并创建一个 countryCodeMap 对象，该对象将国家名称（转换为小写）映射到 ISO2 代码。getCountryCodeByName() 方法用于根据国家名称查找 ISO2 代码。

3. 修改组件代码

修改 country-info.component.ts 文件，使用新的 WorldbankService 方法。

import { Component, OnInit } from '@angular/core';
import { WorldbankService } from '../worldbank.service';
@Component({
selector: 'app-country-info',
templateUrl: './country-info.component.html',
styleUrls: ['./country-info.component.css']
})
export class CountryInfoComponent implements OnInit {
countryName = "";
countryProperties: any = null;
constructor(private worldbankService: WorldbankService) {}
ngOnInit(): void {
// 在组件初始化时加载所有国家信息
this.worldbankService.getAllCountries().subscribe();
}
getCountryProperties() {
const countryCode = this.worldbankService.getCountryCodeByName(this.countryName);
if (countryCode) {
this.worldbankService.getCountryProperties(countryCode).subscribe(
(data: any) => {
this.countryProperties = data[1][0];
},
(error) => {
console.error('Error fetching country properties:', error);
this.countryProperties = null;
}
);
} else {
this.countryProperties = null;
alert('Country not found.');
}
}
}

在这个示例中，ngOnInit 生命周期钩子用于在组件初始化时加载所有国家信息。getCountryProperties() 方法首先使用 getCountryCodeByName() 方法获取 ISO2 代码，然后使用该代码调用 getCountryProperties() 方法获取国家属性。

4. 注意事项

• API 调用频率限制： 世界银行 API 可能有调用频率限制。如果需要频繁查询，请注意控制调用频率，或者考虑使用缓存机制。
• 错误处理： 在实际应用中，需要完善错误处理机制，例如处理 API 调用失败、国家名称未找到等情况。
• 数据缓存： 为了提高性能，可以将国家名称到 ISO2 代码的映射缓存到本地，避免每次都从 API 获取。
• 用户体验： 可以添加自动完成功能，帮助用户输入国家名称。

总结

通过以上步骤，我们可以实现通过国家名称查询世界银行 API 的功能。这种方法需要在客户端进行数据处理，但可以避免直接使用国家名称查询 API 的限制。在实际应用中，需要根据具体需求进行优化和调整。