Angular jsonp 调用

Question

如何通过新的 Angular HttpClientModule 进行 jsonp 调用？

我看到有一个 HttpClient.jsonp 方法，但是从文档中我不太清楚如何设置 HttpClientJsonpModule 拦截器。我不确定 JsonpCallbackContext 应该来自哪里？

https://angular.io/api/common/http/HttpClientJsonpModule

编辑:仅添加 HttpClientJsonpModule 会导致以下错误 -

Refused to execute script because its MIME type ('application/json') is not executable

Answer 1

为了让 JSONP 在 Angular (v4.3+) 中工作，你需要将它添加到你的 AppModule

import { HttpClientJsonpModule } from '@angular/common/http';
@NgModule({
  imports: [ BrowserModule, HttpClientJsonpModule ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

然后在你的服务或组件中

private WIKIPEDIA_URL = 'https://en.wikipedia.org/w/api.php';

const url = searchUrl(term, this.WIKIPEDIA_URL);
this.http.jsonp(url, 'callback')

function searchUrl(term, base) {
  let params = new HttpParams()
    .append('action', 'opensearch')
    .append('search', encodeURIComponent(term))
    .append('format', 'json');
  return `${base}?${params.toString()}`;
}

根据维基百科搜索的需要添加了一些参数。