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