Parameter Kueri 4 HttpClient

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?

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

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

Anda bisa melewatinya seperti ini

let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})

Solusi yang lebih ringkas:

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

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

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!

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.

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