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()}`;
}

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