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

Hola chicos, 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

Donde var1 y var2 encajan 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 cadena de consulta URL.

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

Puede configurarlo mediante la importación de 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: ` 

Hello {{name}}

`, }) 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); } }

Puedes encontrar un ejemplo de trabajo aquí .

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

El método Http.get toma un objeto que implementa RequestOptionsArgs como un 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í .

Editar angular> = 4.3.x

HttpClient se ha presentado 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(...); 

(Respuestas antiguas)

Editar angular> = 4.x

requestOptions.search ha quedado en desuso. Use requestOptions.params en requestOptions.params lugar:

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

Respuesta original (angular 2)

Necesita importar URLSearchParams como se muestra a continuación

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

Y luego construya 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()) ... 

Versión 5+

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

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

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

Versión 4.3.x +

Use 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(apiUrl, {params: params}); 

Podría ayudar a algunos!

Mi ejemplo

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

Mi método

  getUserByName(name: string): Observable { //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 

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 de la forma en que lo hizo @ethemsulan.

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

Angular 6

Puede pasar los parámetros necesarios para obtener una llamada utilizando params:

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

siempre que haya instalado jQuery , hago npm i jquery --save e apps.scripts en apps.scripts en angular-cli.json