Saya telah mencari cara untuk melewati permintaan parameter ke panggilan API dengan baru HttpClientModule
'sHttpClient
dan belum menemukan solusi. Dengan Http
modul 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 search
properti, jadi saya ingin tahu di mana harus memasukkan parameter kueri?
angular
typescript
http
lodash
angular-httpclient
joshrathke
sumber
sumber
this.httpClient.get(url, { params }
Lihat stackoverflow.com/a/54211610/5042169Jawaban:
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 diinisialisasiHttpParams()
dan properti dalamget()
fungsi sekarang disebutparams
bukansearch
.Saya sebenarnya lebih suka sintaks ini sebagai parameter yang lebih agnostik. Saya juga refactored kode untuk membuatnya sedikit lebih pendek.
Beberapa parameter
Cara terbaik yang saya temukan sejauh ini adalah mendefinisikan
Params
objek 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.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.
sumber
let params = new HttpParams(); params.set(...)
tidak akan berfungsi seperti yang diharapkan. Lihat stackoverflow.com/questions/45459532/…new HttpParams({fromObject: { param1: 'value1', ... }});
itu pendekatan yang paling mudah (sudut 5+)params.set(...)
.Anda dapat (dalam versi 5+) menggunakan parameter fromObject dan fromString konstruktor saat membuat HttpParamaters untuk membuat segalanya lebih mudah
atau:
sumber
const params = {'key': 'value'}
ke:http.get('/get/url', { params: params })
Anda bisa melewatinya seperti ini
sumber
params
Solusi yang lebih ringkas:
sumber
Dengan Angular 7, saya membuatnya bekerja dengan menggunakan yang berikut tanpa menggunakan HttpParams.
sumber
Jika Anda memiliki objek yang dapat dikonversi menjadi
{key: 'stringValue'}
berpasangan, Anda dapat menggunakan pintasan ini untuk mengubahnya:Saya suka sintaksisnya!
sumber
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
Anda juga bisa melakukannya
Jika Anda membutuhkan properti yang diwarisi maka hapus hasOwnProperty yang sesuai.
sumber
properti pencarian tipe URLSearchParams di kelas RequestOptions tidak digunakan lagi dalam sudut 4. Sebaliknya, Anda harus menggunakan properti params dari tipe URLSearchParams .
sumber