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

httpclient angular 5 example

Question

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

¿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.

Answer 1

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.search ha quedado en desuso. Utilice 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 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())
...

Answer 2

Version 5+

Con Angular 5 y superior, 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!

Answer 3

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

Answer 4

Los métodos HttpClient 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 utilizando 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 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 here y un ejemplo de trabajo here .

Answer 5

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

Answer 6

Puede usar los parámetros de URL de la documentación oficial.

Ejemplo: this.httpClient.get(this.API, { params: new HttpParams().set(''noCover'', noCover) })

Answer 7

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

Answer 8

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

Answer 9

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 , hago npm i jquery --save e apps.scripts en apps.scripts en angular-cli.json

Answer 10

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