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

232
Visualizações
¿Cómo hacer una solicitud asíncrona JSONP simple en Angular 2?

Estoy tratando de convertir el siguiente código Angular 1 a Angular 2:

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

Debe ser una solicitud JSONP para omitir el problema de la política CORS.

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

0

En la última versión de Angular

  1. Importe los módulos HttpClientModule y HttpClientJsonpModule en el archivo de definición del módulo de su aplicación

     import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http'; @NgModule({ declarations: [ //... List of components that you need. ], imports: [ HttpClientModule, HttpClientJsonpModule, //... ], providers: [ //... ], bootstrap: [AppComponent] })
  2. Inyecte http y mapee el operador rxjs en su servicio:

     import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class MegaSuperService { constructor(private _http: HttpClient) {} }
  3. Realice solicitudes JSONP de la siguiente manera:

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

En Angular versión 2 - versión 4.3

  1. Importe el módulo JSONP en el archivo de definición del módulo de su aplicación:

     import {JsonpModule} from '@angular/http'; @NgModule({ declarations: [ //... List of components that you need. ], imports: [ JsonpModule, //... ], providers: [ //... ], bootstrap: [AppComponent] })
  2. Inyecte el servicio jsonp y mapee el operador rxjs en su servicio:

     import {Injectable} from '@angular/core'; import {Jsonp} from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class MegaSuperService { constructor(private _jsonp: Jsonp) {} }
  3. Realice solicitudes utilizando "JSONP_CALLBACK" como propiedad de devolución de llamada:

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

0

En Angular 4.3 y versiones posteriores, debe usar HttpClientModule porque JsonpModule está en desuso.

  1. Importe HttpClientModule y HttpClientJsonpModule en su módulo.
  2. Inyecte HttpClient en su servicio.
  3. Pase la clave de devolución de llamada como segundo argumento para el método 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'); } }
over 4 years ago · Santiago Trujillo Relatório

0

Si este punto final es compatible con jsonp, puede usar lo siguiente. Debe averiguar el parámetro que se utilizará para proporcionar la devolución de llamada jsonp. En el siguiente código, lo llamo c .

Después de haber registrado JSONP_PROVIDERS al llamar a la función de bootstrap :

 import {bootstrap} from 'angular2/platform/browser' import {JSONP_PROVIDERS} from 'angular2/http' import {AppComponent} from './app.component' bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

Luego puede ejecutar su solicitud usando una instancia de la clase Jsonp que inyectó desde el 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) => { (...) }); } }

Vea esta pregunta para más detalles:

  • Necesito hacer una solicitud http a una lista de suscripción de chimpancés de correo a través de una publicación de componente
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