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

Me gustaría activar una solicitud HTTP desde un componente 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_URLes como una URL sin cadena de consulta como: http://atsomeplace.com/pero quiero que sea comohttp://atsomeplace.com/?var1=val1&var2=val2

¿ Cómo agregar var1y var2a mi objeto de solicitud HTTP como objeto?

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

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

Dec 27 '15 04:12 Miguel Lattuada

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

Puede configurarlo importando 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 HttpClient y usarlo para realizar 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 versiones angulares anteriores a la versión 4 puedes hacer lo mismo usando el servicio Http .

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 utilizar 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 de la clase Http tiene más detalles. Se puede encontrar aquí y un ejemplo práctico aquí .

Dec 26 '2015 21:12 toskv

Editar angular >= 4.3.x

HttpClient se introdujo junto con HttpParams . A continuación 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(...);

(Respuestas antiguas)

Editar angular >= 4.x

requestOptions.searchha quedado en desuso. Utilice requestOptions.paramsen su lugar:

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

Respuesta original (Angular 2)

Necesitas importar URLSearchParamscomo se muestra a continuación.

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

Y luego cree sus parámetros y realice 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())
...

Jan 08 '2017 14:01 Radouane ROUFID

Versión 5+

Con Angular 5 y versiones posteriores, NO es necesario utilizar 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 los 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});

Además, intente encadenar su objeto anidado usando JSON.stringify().

Aug 02 '2017 08:08 Rahmathullah M

angulares 6

Puede pasar los parámetros necesarios para obtener la llamada 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);
})

Jul 22 '2018 19:07 Stefan Mitic