¿Cómo pasar argumentos de URL (cadena de consulta) a una solicitud HTTP en Angular?


266

Estoy creando una solicitud HTTP en Angular, pero no sé cómo agregarle argumentos de URL (cadena de consulta).

this.http.get(StaticSettings.BASE_URL).subscribe(
  (response) => this.onGetForecastResult(response.json()),
  (error) => this.onGetForecastError(error.json()),
  () => this.onGetForecastComplete()
);

Ahora mi StaticSettings.BASE_URL es algo así como una url sin cadena de consulta como: http://atsomeplace.com/ pero quiero que sea http://atsomeplace.com/?var1=val1&var2=val2

¿Dónde caben var1 y var2 en mi objeto de solicitud Http? Quiero agregarlos como un objeto.

{
  query: {
    var1: val1,
    var2: val2
  }
}

y luego solo el módulo Http hace el trabajo de analizarlo en una cadena de consulta de URL.


stackoverflow.com/questions/26541801/… refiera esto. Cree el URL antes de la llamada y páselo a la función de suscripción en lugar de BASE_URL. 2cents
pratikpawar

Respuestas:


331

Los métodos HttpClient le permiten configurar los parámetros en sus opciones.

Puede configurarlo importando el HttpClientModule desde el paquete @ angular / common / http.

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

@NgModule({
  imports: [ BrowserModule, HttpClientModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Después de eso, puede inyectar el HttpClient y usarlo para hacer la solicitud.

import {HttpClient} from '@angular/common/http'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor(private httpClient: HttpClient) {
    this.httpClient.get('/url', {
      params: {
        appid: 'id1234',
        cnt: '5'
      },
      observe: 'response'
    })
    .toPromise()
    .then(response => {
      console.log(response);
    })
    .catch(console.log);
  }
}

Para las versiones angulares anteriores a la versión 4, puede hacer lo mismo con Http servicio .

El método Http.get toma un objeto que implementa RequestOptionsArgs como segundo parámetro.

El campo de búsqueda de ese objeto se puede usar para establecer una cadena o un objeto URLSearchParams .

Un ejemplo:

 // Parameters obj-
 let params: URLSearchParams = new URLSearchParams();
 params.set('appid', StaticSettings.API_KEY);
 params.set('cnt', days.toString());

 //Http request-
 return this.http.get(StaticSettings.BASE_URL, {
   search: params
 }).subscribe(
   (response) => this.onGetForecastResult(response.json()), 
   (error) => this.onGetForecastError(error.json()), 
   () => this.onGetForecastComplete()
 );

La documentación para la clase Http tiene más detalles. Se puede encontrar aquí y un ejemplo de trabajo aquí .


2
Una esencia: gist.github.com/MiguelLattuada/bb502d84854ad9fc26e0 cómo usar el objeto URLSearchParams, gracias de nuevo @toskv
Miguel Lattuada

1
¡Súper hábil con los URLSearchParams! Resolvió mi problema con la serialización del objeto JSON.
Logan H

2
@SukumarMS realmente no hay necesidad de nada especial ya que es parte del camino. Simplemente concatene las cadenas 'blabla.com/page/' + page + '/ activeFilter' + activeFilter. O si desea utilizar los literales de plantilla `blabla.com/page / $ {page} / $ {activeFilter}`.
toskv

10
esto funciona para mí:http.get(url, {params: {var1: val1, var2: val2}})
Alexander Suvorov

8
searchpropiedad ha sido depricada desde 4.0.0 -> use paramsen su lugar
BotanMan

180

Editar angular> = 4.3.x

HttpClient se ha introducido junto con HttpParams . Debajo de un ejemplo de uso:

import { HttpParams, HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

let params = new HttpParams();
params = params.append('var1', val1);
params = params.append('var2', val2);

this.http.get(StaticSettings.BASE_URL, {params: params}).subscribe(...);

(Viejas respuestas)

Editar angular> = 4.x

requestOptions.searchha quedado en desuso Use en su requestOptions.paramslugar:

let requestOptions = new RequestOptions();
requestOptions.params = params;

Respuesta original (angular 2)

Necesitas importar de la URLSearchParamssiguiente manera

import { Http, RequestOptions, URLSearchParams } from '@angular/http';

Y luego construya sus parámetros y haga la solicitud http de la siguiente manera:

let params: URLSearchParams = new URLSearchParams();
params.set('var1', val1);
params.set('var2', val2);

let requestOptions = new RequestOptions();
requestOptions.search = params;

this.http.get(StaticSettings.BASE_URL, requestOptions)
    .toPromise()
    .then(response => response.json())
...

3
No funciona para mi Examiné el código fuente y descubrí que el segundo parámetro de http.get espera una interfaz RequestOptionsArgs, que URLSearchParams no implementa. Ajustar los searchParams dentro de un objeto RequestOptions funciona. Sin embargo, sería bueno tener un atajo.
2017

3
Tienes toda la razón, lo olvidé RequestOptions. Actualicé mi respuesta.
Radouane ROUFID

1
Gracias por señalar la depreciación de search. Arreglado mi problema
Hayden Braxton

¡Gracias por señalar este cambio! Todos los documentos y problemas que he encontrado durante horas me han estado diciendo que adjunte parámetros a la searchpropiedad.
rayepps

63

Version 5+

Con Angular 5 en adelante, NO tiene que usar HttpParams . Puede enviar directamente su objeto json como se muestra a continuación.

let data = {limit: "2"};
this.httpClient.get<any>(apiUrl, {params: data});

Tenga en cuenta que los valores de datos deben ser cadenas, es decir; { params: {limit: "2"}}

Versión 4.3.x +

Utilice HttpParams, HttpClient de @ angular / common / http

import { HttpParams, HttpClient } from '@angular/common/http';
...
constructor(private httpClient: HttpClient) { ... }
...
let params = new HttpParams();
params = params.append("page", 1);
....
this.httpClient.get<any>(apiUrl, {params: params});

Podría ayudar un poco!


@BrunoPeres intenta encadenar tu objeto anidado usandoJSON.stringify()
Rahmathullah M

1
@RahmathullahM - bichu, THX :)
Jamsheer

12

Angular 6

Puede pasar los parámetros necesarios para recibir llamadas utilizando params:

this.httpClient.get<any>(url, { params: x });

donde x = {propiedad: "123"}.

En cuanto a la función api que registra "123":

router.get('/example', (req, res) => {
    console.log(req.query.property);
})

2
Ese fue un cambio agregado en la versión 5. Ya se agregó aquí stackoverflow.com/a/45455904/3276721
Miguel Lattuada el

9

Mi ejemplo

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});

Mi metodo

  getUserByName(name: string): Observable<MyObject[]> {
    //set request params
    let params: URLSearchParams = new URLSearchParams();
    params.set("name", name);
    //params.set("surname", surname); for more params
    this.options.search = params;

    let url = "http://localhost:8080/test/user/";
    console.log("url: ", url);

    return this.http.get(url, this.options)
      .map((resp: Response) => resp.json() as MyObject[])
      .catch(this.handleError);
  }

  private handleError(err) {
    console.log(err);
    return Observable.throw(err || 'Server error');
  }

en mi componente

  userList: User[] = [];
  this.userService.getUserByName(this.userName).subscribe(users => {
      this.userList = users;
    });

Por cartero

http://localhost:8080/test/user/?name=Ethem

6

En Angular 7/8 más reciente, puede usar el enfoque más simple: -

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

getDetails(searchParams) {
    const httpOptions = {
        headers: { 'Content-Type': 'application/json' },
        params: { ...searchParams}
    };
    return this.http.get(this.Url, httpOptions);
}

Esto no funcionará si alguna de las searchParams'propiedades no son stringvalores.
Yulian

5

Si planea enviar más de un parámetro.

Componente

private options = {
  sort:   '-id',
  select: null,
  limit:  1000,
  skip:   0,
  from:   null,
  to:     null
};

constructor(private service: Service) { }

ngOnInit() {
  this.service.getAllItems(this.options)
    .subscribe((item: Item[]) => {
      this.item = item;
    });
}

Servicio

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});
constructor(private http: Http) { }

getAllItems(query: any) {
  let params: URLSearchParams = new URLSearchParams();
  for(let key in query){
    params.set(key.toString(), query[key]);
  }
  this.options.search = params;
  this.header = this.headers();

Y continúe con su solicitud http como lo hizo @ethemsulan.

Ruta del lado del servidor

router.get('/api/items', (req, res) => {
  let q = {};
  let skip = req.query.skip;
  let limit = req.query.limit;
  let sort  = req.query.sort;
  q.from = req.query.from;
  q.to = req.query.to;

  Items.find(q)
    .skip(skip)
    .limit(limit)
    .sort(sort)
    .exec((err, items) => {
      if(err) {
        return res.status(500).json({
          title: "An error occurred",
          error: err
        });
      }
      res.status(200).json({
        message: "Success",
        obj:  items
      });
    });
});

En la solicitud de obtención de su servicio, me falta cómo maneja la solicitud de obtención.
Winnemucca

Oh, supongo que pondría la solicitud de obtención de http en ese método como un retorno como la respuesta de
ethumsulan

2

Puede usar HttpParams desde @ angular / common / http y pasar una cadena con la consulta. Por ejemplo:

import { HttpClient, HttpParams } from '@angular/common/http';
const query = 'key=value' // date=2020-03-06

const options = {
  params: new HttpParams({
    fromString: query
  })
}

Ahora en tu código

this.http.get(urlFull, options);

Y esto funciona para ti :)

Espero ayudarte


0
import ...
declare var $:any;
...
getSomeEndPoint(params:any): Observable<any[]> {
    var qStr = $.param(params); //<---YOUR GUY
    return this._http.get(this._adUrl+"?"+qStr)
      .map((response: Response) => <any[]> response.json())
      .catch(this.handleError);
}

siempre que haya instalado jQuery , lo hago npm i jquery --savee incluyo apps.scriptsenangular-cli.json


0
import { Http, Response } from '@angular/http';
constructor(private _http: Http, private router: Router) {
}

return this._http.get('http://url/login/' + email + '/' + password)
       .map((res: Response) => {
           return res.json();
        }).catch(this._handleError);

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.