Bagaimana cara menyampaikan argumen url (string kueri) ke permintaan HTTP di Angular?

Saya membuat permintaan HTTP pada Angular, tapi saya tidak tahu bagaimana menambahkan argumen url (string kueri) ke sana.

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

Sekarang StaticSettings.BASE_URL saya adalah sesuatu seperti url tanpa string kueri seperti: http://atsomeplace.com/ tapi saya ingin menjadi http://atsomeplace.com/?var1=val1&var2=val2

Di mana var1, dan var2 cocok pada objek permintaan Http saya? Saya ingin menambahkannya seperti objek.

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

dan kemudian hanya modul Http melakukan pekerjaan untuk menguraikannya ke dalam string kueri URL.

Metode HttpClient memungkinkan Anda untuk mengatur params di opsi itu.

Anda dapat mengonfigurasinya dengan mengimpor HttpClientModule dari paket @ angular / common / http.

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

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

Setelah itu Anda bisa menyuntikkan HttpClient dan menggunakannya untuk melakukan permintaan.

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

Untuk versi sudut sebelum versi 4 Anda dapat melakukan hal yang sama menggunakan Http layanan .

The Http.get metode mengambil sebuah benda yang menerapkan RequestOptionsArgs sebagai parameter kedua.

Bidang pencarian objek itu dapat digunakan untuk mengatur string atau objek URLSearchParams .

Sebuah contoh:

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

Dokumentasi untuk kelas Http memiliki rincian lebih lanjut. Ini dapat ditemukan di sini dan contoh yang baik di sini .

Edit Angular> = 4.3.x

HttpClient telah diperkenalkan bersama dengan HttpParams . Di bawah ini contoh penggunaan:

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

(Jawaban lama)

Edit Angular> = 4.x

requestOptions.searchtelah ditinggalkan. Gunakan requestOptions.paramssebaliknya:

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

Jawaban asli (Sudut 2)

Anda perlu mengimpor URLSearchParamsseperti di bawah ini

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

Dan kemudian buat parameter Anda dan buat permintaan http sebagai berikut:

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

Versi 5+

Dengan Angular 5 ke atas, Anda TIDAK harus menggunakan HttpParams . Anda dapat langsung mengirim objek json Anda seperti yang ditunjukkan di bawah ini.

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

Harap dicatat bahwa nilai data harus berupa string, yaitu; { params: {limit: "2"}}

Versi 4.3.x +

Gunakan HttpParams, HttpClient dari @ 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});

Mungkin bisa membantu!

Sudut 6

Anda dapat mengirimkan parameter yang diperlukan untuk mendapatkan panggilan dengan menggunakan params:

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

di mana x = {properti: "123"}.

Adapun fungsi api yang mencatat "123":

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

Contoh saya

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

Metode saya

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

dalam komponen saya

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

Oleh tukang pos

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

Pada Angular 7/8 terbaru, Anda dapat menggunakan pendekatan paling sederhana: -

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

Jika Anda berencana mengirim lebih dari satu parameter.

Komponen

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

Layanan

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

Dan lanjutkan dengan permintaan http Anda seperti yang dilakukan @ethemsulan.

Rute sisi server

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

Anda dapat menggunakan HttpParams dari @ angular / common / http dan meneruskan string dengan kueri. Sebagai contoh:

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

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

Sekarang dalam kode Anda

this.http.get(urlFull, options);

Dan ini bekerja untuk Anda :)

Aku hoppe membantumu

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

asalkan Anda telah menginstal jQuery , saya lakukan npm i jquery --savedan sertakan apps.scriptsdiangular-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);

Anda dapat menggunakan Parameter Url dari dokumentasi resmi.

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