Asynchronous 如何在Angular 2中生成一个简单的JSONP异步请求？

我正在尝试将以下Angular 1代码转换为Angular 2：

$http.jsonp('https://accounts.google.com/logout');

---

它需要是一个JSONP请求才能跳过CORS策略问题。

如果此端点符合JSONP，则可以使用以下命令。您需要找到用于提供jsonp回调的参数。在下面的代码中，我称之为

c

注册了

JSONP\u提供程序后

调用

bootstrap

函数时：

import {bootstrap} from 'angular2/platform/browser'
import {JSONP_PROVIDERS} from 'angular2/http'
import {AppComponent} from './app.component'

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

然后，您可以使用从构造函数中注入的

Jsonp

类的实例执行请求：

import {Component} from 'angular2/core';
import {Jsonp} from 'angular2/http';

@Component({
  selector: 'my-app',
  template: `
    <div>
      Result: {{result | json}}
    </div>
  `
})
export class AppComponent {
  constructor(jsonp:Jsonp) {
    var url = 'https://accounts.google.com/logout&c=JSONP_CALLBACK';
    jsonp.request(url, { method: 'Get' })
     .subscribe((res) => {
       (...)
     });
  }
}

从'angular2/core'导入{Component}；
从'angular2/http'导入{Jsonp}；
@组成部分({
选择器：“我的应用程序”，
模板：`
结果：{Result | json}
`
})
导出类AppComponent{
构造函数（jsonp:jsonp）{
var url='1〕https://accounts.google.com/logout&c=JSONP_CALLBACK';
请求（url，{method:'Get'}）
.订阅（（res）=>{
(...)
});
}
}

有关更多详细信息，请参见此问题：

---

在Angular的最新版本中

在应用程序模块的定义文件中导入HttpClientModule和HttpClientJsonpModule模块

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

 @NgModule({
 declarations: [
     //... List of components that you need.
 ],
 imports: [
     HttpClientModule,
     HttpClientJsonpModule,
     //...
 ],
 providers: [
     //...
 ],
 bootstrap: [AppComponent]
 })

将http和map rxjs操作符插入到您的服务中：

 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/http';
 import 'rxjs/add/operator/map';

 @Injectable()
 export class MegaSuperService {
    constructor(private _http: HttpClient) {}
 }

 import {Injectable} from '@angular/core';
 import {Jsonp} from '@angular/http';
 import 'rxjs/add/operator/map';

 @Injectable()
 export class MegaSuperService {
    constructor(private _jsonp: Jsonp) {}
 }

以以下方式发出JSONP请求：

 // inside your service
 this._http.jsonp('/api/get', 'callback').map(data => {
 // Do stuff.
 });

在第2版-第4.3版中

在应用程序模块的定义文件中导入JSONP模块：

 import {JsonpModule} from '@angular/http';

 @NgModule({
 declarations: [
     //... List of components that you need.
 ],
 imports: [
     JsonpModule,
     //...
 ],
 providers: [
     //...
 ],
 bootstrap: [AppComponent]
 })

将jsonp服务和映射rxjs操作符注入到您的服务中：

 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/http';
 import 'rxjs/add/operator/map';

 @Injectable()
 export class MegaSuperService {
    constructor(private _http: HttpClient) {}
 }

 import {Injectable} from '@angular/core';
 import {Jsonp} from '@angular/http';
 import 'rxjs/add/operator/map';

 @Injectable()
 export class MegaSuperService {
    constructor(private _jsonp: Jsonp) {}
 }

使用“JSONP_回调”作为回调属性发出请求：

 // inside your service
 this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => {
 // Do stuff.
 });

---

在Angular 4.3及以上版本中，您应该使用，因为已弃用

导入并导入到您的模块中

注入到您的服务中

传递回调键作为

jsonp

方法的第二个参数

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// Import relevant http modules
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { ExampleService } from './example.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Import relevant http modules
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [ExampleService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';
// Import HttpClient class
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ExampleService {

  // Inject HttpClient class
  constructor(private http: HttpClient) { }

  getData() {
    const url = "https://archive.org/index.php?output=json&callback=archive";

    // Pass the key for your callback (in this case 'callback')
    // as the second argument to the jsonp method
    return this.http.jsonp(url, 'callback');
  }
}

example.service.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// Import relevant http modules
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { ExampleService } from './example.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Import relevant http modules
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [ExampleService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';
// Import HttpClient class
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ExampleService {

  // Inject HttpClient class
  constructor(private http: HttpClient) { }

  getData() {
    const url = "https://archive.org/index.php?output=json&callback=archive";

    // Pass the key for your callback (in this case 'callback')
    // as the second argument to the jsonp method
    return this.http.jsonp(url, 'callback');
  }
}

---

你知道为什么这个“完全相同的代码”会抛出一个

异常：响应状态：200 Ok for URL:null

，从未进入

map

函数吗？我得到了以下错误：未捕获的引用错误：\uu ng_jsonp\uuuu req0\u finished没有定义，注入jsonp的脚本没有调用回调。有什么想法吗？我的api调用具有jsonp参数。{myAccesToken}我正在从angular/http导入jsonp并注入构造函数。我还在app.module.ts文件中添加了导入。@MoshMage您在IE和Chrome中都看到了这种行为吗？Chrome对我来说运行良好，即在幕后抛出一个错误，但对订阅返回一个响应200:OK。@GastonK API是否期望回调为“JSONP_回调”？如果angular看到这个精确的字符串，它会用_ung_jsonp__;u_;req_finished来覆盖它。见：谢谢。除了这个答案之外，我们需要将“回调”替换为“JSONP_回调”。@Rahulupadhaya我已经用你的更正更新了答案。非常感谢。作为一个数据点，我发现不仅仅是

&callback=JSONP_callback

没有必要，它破坏了一些东西——也许这是Angular的另一个/新的/旧版本；无论如何，它只是“知道”出于某种原因添加然后删除回调信息。YMMV。@kcrisman接得好！查看

JSONP\u CALLBACK

被附加到CALLBACK参数。我现在更新我的答案。现在有一个新问题。跨源读取阻塞（CORB）阻塞的跨源响应