Question

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

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

它必须是JSONP请求才能跳过CORS策略问题。

Answer 1

最新版本的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 和映射 rxjs运营商注入您的服务中：

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

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

以下列方式发出JSONP请求：

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

在Angular版本2 - 版本4.3

在app模块的定义文件中导入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 {Jsonp} from '@angular/http';
import 'rxjs/add/operator/map';

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

使用＆＃34; JSONP_CALLBACK＆＃34;发出请求作为回调属性：

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

Answer 2

在 Angular 4.3 及以上，您应该使用HttpClientModule，因为JsonpModule已被弃用。

将HttpClientModule和HttpClientJsonpModule导入您的模块。
将HttpClient注入您的服务。
将回调密钥作为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 { }

example.service.ts

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');
  }
}

Answer 3

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

在调用c函数时注册JSONP_PROVIDERS后：

bootstrap

然后，您可以使用从构造函数中注入的import {bootstrap} from 'angular2/platform/browser' import {JSONP_PROVIDERS} from 'angular2/http' import {AppComponent} from './app.component' bootstrap(AppComponent, [ JSONP_PROVIDERS ]);类的实例来执行请求：

Jsonp

有关详细信息，请参阅此问题：

I need to do a http request to a mail chimp subscription list via a component post

如何在Angular 2中创建一个简单的JSONP异步请求？

3 个答案: