Parameter Kueri 4 HttpClient

147

Saya telah mencari cara untuk melewati permintaan parameter ke panggilan API dengan baru HttpClientModule'sHttpClient dan belum menemukan solusi. Dengan Httpmodul lama Anda akan menulis sesuatu seperti ini.

getNamespaceLogs(logNamespace) {

    // Setup log namespace query parameter
    let params = new URLSearchParams();
    params.set('logNamespace', logNamespace);

    this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params })
}

Ini akan menghasilkan panggilan API ke URL berikut:

localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace

Namun, HttpClient get()metode baru tidak memiliki searchproperti, jadi saya ingin tahu di mana harus memasukkan parameter kueri?

joshrathke
sumber
2
Dengan Angular 7, Anda dapat menulis params sebagai objek dan menggunakannya seperti ini: this.httpClient.get(url, { params } Lihat stackoverflow.com/a/54211610/5042169
Jun711

Jawaban:

231

Saya akhirnya menemukannya melalui IntelliSense pada get()fungsi. Jadi, saya akan mempostingnya di sini untuk siapa saja yang mencari informasi serupa.

Bagaimanapun, sintaksisnya hampir identik, tetapi sedikit berbeda. Alih-alih menggunakan URLSearchParams()parameter perlu diinisialisasi HttpParams()dan properti dalam get()fungsi sekarang disebut paramsbukan search.

import { HttpClient, HttpParams } from '@angular/common/http';
getLogs(logNamespace): Observable<any> {

    // Setup log namespace query parameter
    let params = new HttpParams().set('logNamespace', logNamespace);

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })
}

Saya sebenarnya lebih suka sintaks ini sebagai parameter yang lebih agnostik. Saya juga refactored kode untuk membuatnya sedikit lebih pendek.

getLogs(logNamespace): Observable<any> {

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {
        params: new HttpParams().set('logNamespace', logNamespace)
    })
}

Beberapa parameter

Cara terbaik yang saya temukan sejauh ini adalah mendefinisikan Paramsobjek dengan semua parameter yang ingin saya definisikan dalam. Seperti yang ditunjukkan @estus dalam komentar di bawah, ada banyak jawaban bagus dalam Pertanyaan ini tentang cara menetapkan beberapa parameter.

getLogs(parameters) {

    // Initialize Params Object
    let params = new HttpParams();

    // Begin assigning parameters
    params = params.append('firstParameter', parameters.valueOne);
    params = params.append('secondParameter', parameters.valueTwo);

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

Beberapa Parameter dengan Logika Bersyarat

Hal lain yang sering saya lakukan dengan beberapa parameter adalah mengizinkan penggunaan beberapa parameter tanpa memerlukan kehadiran mereka di setiap panggilan. Menggunakan Lodash, cukup sederhana untuk menambahkan / menghapus parameter dari panggilan ke API. Fungsi persis yang digunakan dalam Lodash atau Garis Bawah, atau vanilla JS dapat bervariasi tergantung pada aplikasi Anda, tetapi saya telah menemukan bahwa memeriksa definisi properti berfungsi dengan cukup baik. Fungsi di bawah ini hanya akan melewati parameter yang memiliki properti yang sesuai dalam variabel parameter yang dilewatkan ke fungsi.

getLogs(parameters) {

    // Initialize Params Object
    let params = new HttpParams();

    // Begin assigning parameters
    if (!_.isUndefined(parameters)) {
        params = _.isUndefined(parameters.valueOne) ? params : params.append('firstParameter', parameters.valueOne);
        params = _.isUndefined(parameters.valueTwo) ? params : params.append('secondParameter', parameters.valueTwo);
    }

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })
joshrathke
sumber
6
Cuplikan pertama salah. let params = new HttpParams(); params.set(...)tidak akan berfungsi seperti yang diharapkan. Lihat stackoverflow.com/questions/45459532/…
Estus Flask
@ joshrathke Bisakah Anda menambahkan cara menambahkan header dan params bersama?
Savad KP
3
@SavadKP Anda dapat mengaturnya seperti ini.http.get (url, {header: header, params: params}); dan baca tentang HttpHeaders baru seperti HttpParams
Junaid
Saya kira new HttpParams({fromObject: { param1: 'value1', ... }});itu pendekatan yang paling mudah (sudut 5+) params.set(...).
Pankaj Prakash
88

Anda dapat (dalam versi 5+) menggunakan parameter fromObject dan fromString konstruktor saat membuat HttpParamaters untuk membuat segalanya lebih mudah

    const params = new HttpParams({
      fromObject: {
        param1: 'value1',
        param2: 'value2',
      }
    });

    // http://localhost:3000/test?param1=value1&param2=value2

atau:

    const params = new HttpParams({
      fromString: `param1=${var1}&param2=${var2}`
    });

    //http://localhost:3000/test?paramvalue1=1&param2=value2
JayChase
sumber
27
Ini tidak diperlukan lagi. Anda bisa langsung mengirimkan objek JSON ke HttpClient. const params = {'key': 'value'}ke: http.get('/get/url', { params: params })
hazard89
7
@ hazard89 Benar. Tetapi berhati-hatilah: hanya nilai string atau string [] yang diizinkan!
Jose Enrique
Menghemat banyak waktu saya. Saya membuat url dengan menambahkan params kueri sebagai string ke url permintaan.
Pankaj Prakash
16

Anda bisa melewatinya seperti ini

let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})
Pradeep BP
sumber
3
Benar tapi itu melempar mengetik keluar jendela
DanLatimer
@DanLatimer Anda tidak harus menggunakan apa pun, sehingga Anda dapat terus menggunakan pengetikan sampai Anda meneruskannya keparams
InDieTasten
11

Solusi yang lebih ringkas:

this._Http.get(`${API_URL}/api/v1/data/logs`, { 
    params: {
      logNamespace: logNamespace
    } 
 })
Darwayne
sumber
6

Dengan Angular 7, saya membuatnya bekerja dengan menggunakan yang berikut tanpa menggunakan HttpParams.

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

export class ApiClass {

  constructor(private httpClient: HttpClient) {
    // use it like this in other services / components etc.
    this.getDataFromServer().
      then(res => {
        console.log('res: ', res);
      });
  }

  getDataFromServer() {
    const params = {
      param1: value1,
      param2: value2
    }
    const url = 'https://api.example.com/list'

    // { params: params } is the same as { params } 
    // look for es6 object literal to read more
    return this.httpClient.get(url, { params }).toPromise();
  }
}
Jun711
sumber
4

Jika Anda memiliki objek yang dapat dikonversi menjadi {key: 'stringValue'}berpasangan, Anda dapat menggunakan pintasan ini untuk mengubahnya:

this._Http.get(myUrlString, {params: {...myParamsObject}});

Saya suka sintaksisnya!

Jeremy Moritz
sumber
3

joshrathke benar.

Dalam angular.io docs ditulis bahwa URLSearchParams dari @ angular / http sudah usang . Sebagai gantinya Anda harus menggunakan HttpParams dari @ angular / common / http . Kode ini sangat mirip dan identik dengan apa yang telah ditulis joshrathke. Untuk beberapa parameter yang disimpan misalnya dalam objek seperti

{
  firstParam: value1,
  secondParam, value2
}

Anda juga bisa melakukannya

for(let property in objectStoresParams) {
  if(objectStoresParams.hasOwnProperty(property) {
    params = params.append(property, objectStoresParams[property]);
  }
}

Jika Anda membutuhkan properti yang diwarisi maka hapus hasOwnProperty yang sesuai.

Sven
sumber
2

properti pencarian tipe URLSearchParams di kelas RequestOptions tidak digunakan lagi dalam sudut 4. Sebaliknya, Anda harus menggunakan properti params dari tipe URLSearchParams .

patel sanket
sumber