it-swarm.com.de

Wie übergeben Sie URL-Argumente (Abfragezeichenfolge) an eine HTTP-Anforderung auf Angular

Hallo Leute Ich erstelle eine HTTP-Anfrage auf Angular, weiß aber nicht, wie ich URL-Argumente (Abfragezeichenfolge) hinzufügen soll.

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

Jetzt ist meine StaticSettings.BASE_URL so etwas wie eine URL ohne Abfragezeichenfolge wie: http://atsomeplace.com/ aber ich möchte, dass es http://atsomeplace.com/?var1=val1&var2=val2 ist

Wo passen var1 und var2 auf mein HTTP-Anforderungsobjekt? Ich möchte sie wie ein Objekt hinzufügen.

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

und dann erledigen Sie einfach das HTTP-Modul, um es in die URL-Abfragezeichenfolge zu analysieren.

206
Miguel Lattuada

Mit den Methoden - HttpClient können Sie params in den Optionen festlegen.

Sie können es konfigurieren, indem Sie das - HttpClientModule aus dem Paket @ angle/common/http importieren.

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

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

Danach können Sie den HttpClient einfügen und damit die Anfrage ausführen.

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

Für eckige Versionen vor Version 4 können Sie dasselbe mit dem Dienst Http tun.

Die Methode Http.get verwendet ein Objekt, das RequestOptionsArgs als zweiten Parameter implementiert.

Das Feld search dieses Objekts kann verwendet werden, um einen String oder ein URLSearchParams - Objekt festzulegen.

Ein Beispiel:

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

Die Dokumentation für die Klasse Http enthält weitere Details. hier und ein Arbeitsbeispiel hier .

272
toskv

Winkel bearbeiten> = 4.3.x

HttpClient wurde zusammen mit HttpParams eingeführt. Nachfolgend ein Anwendungsbeispiel:

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

(Alte Antworten)

Winkel bearbeiten> = 4.x

requestOptions.search ist veraltet. Verwenden Sie stattdessen requestOptions.params:

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

Ursprüngliche Antwort (Winkel 2)

Sie müssen URLSearchParams wie folgt importieren

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

Und dann bauen Sie Ihre Parameter auf und stellen Sie die http-Anfrage wie folgt:

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+

Mit Angular 5 und höher müssen Sie NICHT HttpParams verwenden. Sie können Ihr Json-Objekt wie unten gezeigt direkt senden.

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

Bitte beachten Sie, dass Datenwerte string sein sollten, dh; { params: {limit: "2"}}

Version 4.3.x +

Verwenden Sie HttpParams, HttpClient from @ angle/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});

Könnte ein paar helfen!

42
Rahmathullah M

Mein Beispiel

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

Meine Methode

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

in meiner Komponente

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

Mit dem Postboten

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

Winkel 6

Sie können Parameter übergeben, die für den Aufruf von get benötigt werden, indem Sie Parameter verwenden:

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

dabei gilt: x = {property: "123"}.

Wie für die API-Funktion, die "123" protokolliert:

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

Wenn Sie mehr als einen Parameter senden möchten.

Komponente

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

Bedienung

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

Und fahren Sie mit Ihrer http-Anfrage fort, wie @ethemsulan es getan hat.

Serverseitige Route

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

Im neuesten Angular 7/8 können Sie den einfachsten Ansatz verwenden:

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

vorausgesetzt, Sie haben jQuery installiert , ich npm i jquery --save und füge apps.scripts in angular-cli.json ein

0
Toolkit

Sie können Url Parameters aus der offiziellen Dokumentation verwenden. 

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

0