Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

237
Visualizações
How to make a simple JSONP asynchronous request in Angular 2?

I'm trying to convert the following Angular 1 code to Angular 2:

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

It needs to be a JSONP request to skip the CORS policy issue.

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

In the latest version of Angular

  1. Import HttpClientModule and HttpClientJsonpModule modules in your app module's definition file

     import {
         HttpClientModule,
         HttpClientJsonpModule
     } from '@angular/common/http';
    
     @NgModule({
     declarations: [
         //... List of components that you need.
     ],
     imports: [
         HttpClientModule,
         HttpClientJsonpModule,
         //...
     ],
     providers: [
         //...
     ],
     bootstrap: [AppComponent]
     })
    
  2. Inject http and map rxjs operator into your service:

     import {Injectable} from '@angular/core';
     import {HttpClient} from '@angular/http';
     import 'rxjs/add/operator/map';
    
     @Injectable()
     export class MegaSuperService {
        constructor(private _http: HttpClient) {}
     }
    
  3. Make JSONP requests in the following way:

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

In Angular version 2 - version 4.3

  1. Import JSONP module in your app module's definition file:

     import {JsonpModule} from '@angular/http';
    
     @NgModule({
     declarations: [
         //... List of components that you need.
     ],
     imports: [
         JsonpModule,
         //...
     ],
     providers: [
         //...
     ],
     bootstrap: [AppComponent]
     })
    
  2. Inject jsonp service and map rxjs operator into your service:

     import {Injectable} from '@angular/core';
     import {Jsonp} from '@angular/http';
     import 'rxjs/add/operator/map';
    
     @Injectable()
     export class MegaSuperService {
        constructor(private _jsonp: Jsonp) {}
     }
    
  3. Make requests using "JSONP_CALLBACK" as a callback property:

     // inside your service
     this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => {
     // Do stuff.
     });
    
over 4 years ago · Santiago Trujillo Relatório

0

In Angular 4.3 and up you should use HttpClientModule because the JsonpModule is deprecated.

  1. Import HttpClientModule and HttpClientJsonpModule into your module.
  2. Inject HttpClient into your service.
  3. Pass the callback key as the second argument for the jsonp method.

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');
  }
}
over 4 years ago · Santiago Trujillo Relatório

0

If this endpoint is jsonp-compliant, you can use the following. You need to find out the parameter to use to provide the jsonp callback. In the code below, I call it c.

After having registered JSONP_PROVIDERS when calling the bootstrap function:

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

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

You can then execute your request using an instance of the Jsonp class you injected from constructor:

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) => {
       (...)
     });
  }
}

See this question for more details:

  • I need to do a http request to a mail chimp subscription list via a component post
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda