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

Je crée une requête HTTP sur Angular, mais je ne sais pas comment y 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 comme: http://atsomeplace.com/ mais je veux que ce soit http://atsomeplace.com/?var1=val1&var2=val2

Où var1 et var2 tiennent-ils sur mon objet de demande Http? Je veux les ajouter comme un objet.

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

puis juste le module Http fait le travail pour l'analyser dans la chaîne de requête URL.

Les méthodes HttpClient vous permettent de définir les paramètres dans ses options.

Vous pouvez le configurer en important le HttpClientModule à partir du package @ 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 faire la demande.

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 en utilisant le service Http .

La méthode Http.get prend un objet qui implémente RequestOptionsArgs comme deuxième paramètre.

Le champ de recherche 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. Il peut être trouvé ici et un exemple de travail ici .

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

(Anciennes réponses)

Modifier angulaire> = 4.x

requestOptions.searchest obsolète. Utilisez requestOptions.paramsplutôt:

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

Réponse originale (angulaire 2)

Vous devez importer URLSearchParamscomme ci-dessous

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

Et puis créez vos paramètres et effectuez la demande 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())
...

Version 5+

Avec Angular 5 et plus, vous n'avez PAS besoin d'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 des données doivent être des chaînes, c'est-à-dire; { params: {limit: "2"}}

Version 4.3.x +

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

Pourrait aider certains!

Angulaire 6

Vous pouvez transmettre les paramètres nécessaires pour obtenir l'appel en utilisant des paramètres:

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

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

Quant à la fonction api qui enregistre "123":

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

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

Dans le dernier Angular 7/8, 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);
}

Si vous prévoyez d'envoyer plusieurs paramètres.

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

Vous pouvez utiliser HttpParams à partir de @ angular / common / http et passer une chaîne avec la requête. Par exemple:

import { HttpClient, HttpParams } from '@angular/common/http';
const query = 'key=value' // date=2020-03-06

const options = {
  params: new HttpParams({
    fromString: query
  })
}

Maintenant dans votre code

this.http.get(urlFull, options);

Et cela fonctionne pour vous :)

J'espère vous aider

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 le fais npm i jquery --saveet l'inclus apps.scriptsdansangular-cli.json

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

Vous pouvez utiliser les paramètres d'URL de la documentation officielle.

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