Angular'da bir HTTP isteğine URL parametrelerini (sorgu dizesi) nasıl geçirebilirim?

Bir Angular bileşeninden HTTP isteği başlatmak istiyorum, ancak buna URL parametrelerini (sorgu dizesi) nasıl ekleyeceğimi bilmiyorum.

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

Şimdi benim StaticSettings.BASE_URL bir sorgu dizesi olmadan bir URL gibi: http://atsomeplace.com/ ama ben bunun http://atsomeplace.com/?var1=val1&var2=val2 gibi olmasını istiyorum

HTTP isteği nesneme var1 ve var2'yi bir nesne olarak nasıl eklerim?

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

ve sonra sadece HTTP modülü bunu URL sorgu dizisine çevirmek için işi yapar.

Cevap #1

HttpClient yöntemleri, params'ı seçeneklerinde ayarlamanıza izin verir.

Bunu, @angular/common/http paketinden HttpClientModule modülünü ithal ederek yapılandırabilirsiniz.

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

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

Bundan sonra HttpClient'i enjekte edebilir ve isteği yapmak için kullanabilirsiniz.

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

Angular sürüm 4'ten önceki sürümler için aynı şeyi Http servisini kullanarak yapabilirsiniz.

Http.get yöntemi, ikinci parametre olarak RequestOptionsArgs uygulayan bir nesne alır.

O nesnenin arama alanı, bir dize veya bir URLSearchParams nesnesi ayarlamak için kullanılabilir.

Bir örnek:

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

Http sınıfı için belgelerde daha fazla detay bulunmaktadır. Burada ve çalışan bir örnek burada bulunabilir.

Cevap #2

Angular >= 4.3.x'i Düzenle

HttpClient, HttpParams ile birlikte tanıtıldı. Aşağıda kullanımına bir örnek bulunmaktadır :

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

(Eski cevaplar)

Angular >= 4.x Düzenle

requestOptions.search kullanımdan kaldırıldı. Bunun yerine requestOptions.params kullanın :

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

Orijinal cevap (Angular 2)

Aşağıdaki gibi URLSearchParams öğesini içe aktarmanız gerekir

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

Ve sonra parametrelerinizi oluşturun ve http isteğini aşağıdaki gibi yapın :

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

Cevap #3

Sürüm 5+

Angular 5 ve sonrası ile, HttpParams kullanmak zorunda DEĞİLSİNİZ. Json nesnenizi aşağıda gösterildiği gibi doğrudan gönderebilirsiniz.

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

Lütfen veri değerlerinin string olması gerektiğini unutmayın, örn; { params: {limit: "2"}}

Sürüm 4.3.x+

@angular/common/http içinden HttpParams, HttpClient kullanın

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

Ayrıca, iç içe geçmiş nesnenizi JSON.stringify() kullanarak dize haline getirmeyi deneyin.

Cevap #4

Angular 6

Get çağrısı için gereken parametreleri params kullanarak geçirebilirsiniz:

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

burada x={ property: "123" }.

“123” kaydeden api işlevine gelince:

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

İlgili makaleler