Angular 5无法从URL加载JSONP数据的问题求助

我来帮你排查这个JSONP加载失败的问题，从你的代码和Chrome控制台的418错误来看，核心问题出在请求路径和模块使用上，以下是具体的修正步骤：

1. 首先修正请求URL：别向本地服务器发请求 #

你当前写的URL是/common/v1/airport.json?code=BGW&，这个相对路径会让浏览器把请求发送到你的本地Ionic开发服务器，而不是你要获取数据的目标API服务器。本地服务器根本没有这个接口，所以返回了418这个趣味状态码（本质是请求没有被正确路由到目标服务）。

解决方法很简单：把URL替换成目标API的完整地址，比如假设你的API服务器地址是https://your-api-domain.com，那么URL应该写成：

const url = 'https://your-api-domain.com/common/v1/airport.json?code=BGW';

另外注意URL末尾的多余&可以删掉，避免不必要的解析问题。

2. 升级Angular JSONP的使用方式（符合当前最佳实践） #

你现在导入的是@angular/http里的Jsonp，但Angular 4.3+之后官方更推荐用HttpClient结合HttpClientJsonpModule来处理JSONP请求，这种方式更简洁也更稳定。

第一步：在AppModule中导入正确的模块 #

打开src/app/app.module.ts，添加以下导入并加入到imports数组：

import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

@NgModule({
  declarations: [/* ... */],
  imports: [
    // 其他已有的模块（比如IonicModule等）
    HttpClientModule,
    HttpClientJsonpModule
  ],
  // ...其他配置
})
export class AppModule { }

第二步：修改home.ts的请求代码 #

删掉旧的Jsonp导入，只用HttpClient即可：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  result: any = [];
  data: Observable<any>;

  constructor(public navCtrl: NavController, private http: HttpClient) { }

  ionViewDidLoad() {
    // 替换成你的真实API完整地址
    const url = 'https://your-api-domain.com/common/v1/airport.json?code=BGW';
    // 使用HttpClient的jsonp方法，第二个参数是API要求的callback参数名（通常是'callback'）
    this.data = this.http.jsonp(url, 'callback');
    
    // 订阅请求，同时添加错误回调方便排查问题
    this.data.subscribe(
      data => {
        this.result = data;
        console.log('获取到的数据:', data);
      },
      error => {
        console.error('请求出错:', error);
      }
    );
  }
}

3. 确认目标API确实支持JSONP #

不是所有API都支持JSONP，你需要确认：

• 目标API文档明确说明支持JSONP，并且接受callback参数（有些API可能用其他参数名，比如jsonp，需要对应修改）
• 如果目标API支持CORS，其实你完全可以不用JSONP，直接用普通的http.get()请求即可，更简单。

4. 额外建议：添加错误捕获 #

我在上面的代码里加了错误回调，这样如果还有问题，你能在控制台看到更详细的错误信息，比如跨域问题、API返回格式错误等，比只看状态码更有用。

内容的提问来源于stack exchange，提问作者Ali Ghassan