web-dev-qa-db-fra.com

Comment passer des arguments url (chaîne de requête) à une requête HTTP sur Angular?

Salut les gars, je crée une requête HTTP sur Angular, mais je ne sais pas comment ajouter des arguments d'URL (chaîne de requête).

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

Maintenant, mon StaticSettings.BASE_URL est quelque chose comme une URL sans chaîne de requête du type: http://atsomeplace.com/ mais je veux que ce soit http://atsomeplace.com/?var1=val1&var2=val2

Où var1 et var2 conviennent-ils sur mon objet de requête HTTP? Je veux les ajouter comme un objet.

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

et ensuite, seul le module HTTP fait le travail pour l'analyser dans une chaîne de requête d'URL.

httpangulartypescript
206
Miguel Lattuada

Les méthodes HttpClient vous permettent de définir le params dans ses options.

Vous pouvez le configurer en important le HttpClientModule à partir du paquet @ angular/common/http.

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

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

Après cela, vous pouvez injecter le HttpClient et l’utiliser pour exécuter la requête.

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

Pour les versions angulaires antérieures à la version 4, vous pouvez faire de même avec le service Http.

La méthode Http.get prend un objet qui implémente RequestOptionsArgs en tant que second paramètre.

Le champ search de cet objet peut être utilisé pour définir une chaîne ou un objet URLSearchParams .

Un exemple:

 // 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 documentation de la classe Http contient plus de détails. On peut le trouver ici et un exemple de travail ici .

272
toskv

Modifier angulaire> = 4.3.x

HttpClient a été introduit avec HttpParams . Ci-dessous un exemple d'utilisation:

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

(Réponses anciennes)

Modifier angulaire> = 4.x

requestOptions.search est obsolète. Utilisez requestOptions.params à la place:

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

Réponse originale (angulaire 2)

Vous devez importer URLSearchParams comme ci-dessous

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

Et ensuite, construisez vos paramètres et faites la requête http comme suit:

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())
...
144
Radouane ROUFID

Version 5+

Avec Angular 5 et plus, vous NE PAS utiliser HttpParams . Vous pouvez envoyer directement votre objet JSON comme indiqué ci-dessous.

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

Veuillez noter que les valeurs de données doivent être string, ie; { params: {limit: "2"}}

Version 4.3.x +

Utilisez HttpParams, HttpClient from @ 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});

Pourrait aider certains!

42
Rahmathullah M

Mon exemple

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

Ma méthode

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

dans ma composante

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

Par facteur

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

angulaire 6

Vous pouvez transmettre les paramètres nécessaires à l'appel en utilisant les paramètres suivants:

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

où x = {propriété: "123"}.

En ce qui concerne la fonction api qui enregistre "123":

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

Si vous envisagez d’envoyer plus d’un paramètre.

Composant

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

Un service

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

Et continuez avec votre demande http, comme l'a fait @ethemsulan.

Route côté serveur

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

Dans la Angular 7/8 la plus récente, vous pouvez utiliser l'approche la plus 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);
}
1
Kapil Raghuwanshi
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);
0
vbrgr
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);
}

à condition que vous ayez installé jQuery , je fais npm i jquery --save et l'inclure dans apps.scripts dans angular-cli.json

0
Toolkit

Vous pouvez utiliser Paramètres URL de la documentation officielle. 

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

0
Muhammed Ozdogan