Klien HTTP
Pertama, jelaskan cara menggunakan Core client secara langsung, kemudian jelaskan contoh integrasi opsional dari adapter HTTP umum yang digunakan oleh layanan otomatis.
Penggunaan langsung Core client.
Paths yang disuntikkan ke createHttpClient<Paths>() adalah kontrak permintaan. URL dan metode berasal dari kunci Paths, queryString dan pathVariable berasal dari parameters, dan body ditentukan dari requestBody.
Tipe respons ditentukan oleh R yang dipanggil oleh callApi<R>(). Core tidak secara otomatis menyimpulkan tipe respons dari respons OpenAPI.
httpClient.ts
tsBentuk respons dapat dipilih per API.
typed-rx-http tidak memaksa ResponseWrapper. Jika respons server adalah wrapper, tentukan tipe wrapper sebagai R, jika tidak, tentukan tipe respons yang sebenarnya.
Opsional: adapter umum proyek + layanan otomatis.
Konfigurasi commonService di bawah ini bukanlah struktur wajib dari Core, tetapi pola integrasi proyek yang ingin menerapkan otentikasi, header SSR, dan kebijakan cache sekaligus ke beberapa layanan yang dihasilkan.
Apa yang dilakukan commonService proyek.
commonService bukanlah nama kelas khusus yang disediakan oleh @byeolnaerim/typed-rx-http, tetapi merujuk pada file milik pengguna yang digunakan untuk mengumpulkan kebijakan HTTP umum proyek di satu tempat. Nama file bebas, dan dalam contoh di bawah ini menggunakan nama proyek nyata yaitu rxjsHttpService.ts.
Tanpa mengulangi createHttpClient di layar dan service yang dihasilkan otomatis, file ini menggunakan callApi dan callApiStream yang dihasilkan sebagai titik masuk umum. Oleh karena itu, jika aturan pembaruan otentikasi, pengiriman header SSR, cache, dan penanganan kesalahan dimodifikasi sekali, maka akan diterapkan secara seragam ke semua service yang dihasilkan.
Lihat kode lengkap commonService/rxjsHttpService.
1. Minimum lengkap
Inti dari commonService adalah kode di bawah ini. Buat headerStore dan klien HTTP bertipe sekali, lalu ekspor callApi/callApiStream yang digunakan secara umum oleh layanan yang dihasilkan. uploadFile dan createSSEObservable juga dapat diekspos dari klien yang sama.
rxjsHttpService.ts
ts2. Next.js + otentikasi sesi + cache CSR/SSR yang dapat diperluas
Di bawah ini adalah contoh proyek lengkap yang menambahkan otentikasi sesi, header SSR, dan cache CSR/SSR ke adapter umum yang sama. Jika proyek yang dihasilkan mengimpor pembungkus cache, bentuk ini menjadi acuan. Cukup salin, lalu sesuaikan setLogin import, posisi ApiTypes dan CacheNames, jalur API otentikasi, variabel lingkungan, dan jalur tidak sah sesuai dengan proyek Anda.
rxjsHttpService.ts
tsPeran berdasarkan konfigurasi kode
paths
Ini adalah tipe jalur OpenAPI yang digunakan saat createHttpClient dan ServiceArguments memeriksa URL, metode, variabel jalur, kueri, dan tipe body.
headerStore
Menyimpan header umum seperti Content-Type dan Authorization di browser dan membagikannya dengan otentikasi sesi serta koneksi RSocket.
headersProvider
CSR mengembalikan headerStore, sedangkan SSR membaca Cookie dan Authorization dari permintaan saat ini untuk memberikan header yang berbeda pada setiap permintaan.
service
Klien HTTP bertipe nyata dengan URL dasar, header umum, penanganan 401 server, dan pesan kesalahan dasar.
sessionAuth
Menyinkronkan token sesi sebelum permintaan dan jika 401, mencoba kembali Observable asli setelah refresh, dan jika gagal, menjalankan alur logout.
callApi / callApiStream
Fungsi umum yang diimpor oleh layanan REST yang dihasilkan secara otomatis dan layanan aliran NDJSON. Keduanya mengembalikan Observable RxJS.
callApiClientCache / callApiServerCache
Wrapper cache yang memanfaatkan cache CSR di browser dan memuat cache SSR dari @byeolnaerim/typed-rx-http/next secara dinamis di server.
Cara terhubung dengan layanan yang dihasilkan secara otomatis
Generator menghitung jalur relatif dari commonServiceFile dan menambahkan impor ke setiap layanan. Antarmuka tidak memanggil file umum secara langsung, tetapi mengimpor fungsi yang dihasilkan, di mana fungsi yang dihasilkan mengubah path, params, body menjadi pathVariable, queryString, body dari ServiceArguments dan meneruskannya ke callApi.
generateSwagger.cjs
jsSatu respons adalah firstValueFrom
REST API yang merespons sekali dan selesai seperti pencarian, penyimpanan, dan penghapusan dapat menerima Observable yang dihasilkanfirstValueFromsehingga dapat digunakan dengan alami di dalam fungsi async yang ada.
BusinessSearchPage.tsx
tsxDi layar hanya paramsyang terlihat, tetapi di dalam layanan yang dihasilkan terdapat URL, metode HTTP, dan tipe respons. Parameter kueri selalu{ params: { ... } }dikirim sebagai.
Beberapa respons adalah subscribe
Permintaan yang menerima beberapa nilai seperti kemajuan tugas atau aliran RSocketsubscribeakan diterima, dan langganan akan dibatalkan saat komponen menghilang.
BatchJobPage.tsx
tsxJika menggunakan callApi secara langsung
Untuk proyek yang tidak menggunakan generator layanan atau memeriksa endpoint sementara sebelum pembuatan, Anda dapat memanggil callApi dari layanan umum secara langsung. Tipe permintaan diperiksa di jalur dan tipe respons ditentukan oleh pemanggil secara generik.