Mulai

Pertama, saya akan menjelaskan cara menggunakan klien typed-rx-http Core itu sendiri, dan kemudian menjelaskan cara menghubungkan adapter HTTP publik milik proyek dan layanan otomatisasi pembuatan Swagger hanya di proyek yang diperlukan.

1. Instal

bash

2. Menggunakan Core client secara langsung tanpa otomatisasi

Pertama, cara penggunaan yang paling dasar adalah createHttpClient<Paths>()membuat client sekali, dan memanggil callApi dari client tersebut. Paths adalah tipe paths yang dihasilkan dari OpenAPI, tetapi tipe yang didefinisikan sendiri dengan struktur yang sama juga dapat digunakan.

httpClient.ts

Nilai yang dikembalikan selalu Observable

callApi dan callApiStream mengembalikan RxJS Observable, bukan Promise. Hanya ketika menggunakan satu respons dalam fungsi async, secara eksplisit mengonversi dengan firstValueFrom atau lastValueFrom, dan permintaan yang menghasilkan beberapa nilai diproses dengan pipe atau subscribe.

3. Pilihan: Apa itu rxjsHttpService/commonService?

Dokumen yang disebut rxjsHttpService.ts atau commonService.ts bukan nama file tetap yang dihasilkan oleh pustaka. Ini adalah file adapter HTTP yang dimiliki langsung oleh proyek. Beberapa layanan REST yang dihasilkan tidak membuat createHttpClient masing-masing, tetapi menggunakan fungsi callApi/callApiStream/cache yang diekspor dari file ini sebagai titik masuk umum.

Bentuk terkecil adalah dengan membuat headerStore dan createHttpClient sekali seperti kode lengkap di bawah ini dan mengekspor kembali metode pustaka sebagai fungsi proyek. Jika tidak menggunakan fungsi cache dari layanan otomatis, struktur ini sudah cukup untuk memahami.

rxjsHttpService.ts

Untuk menangani otentikasi sesi, Cookie/Authorization per permintaan SSR, cache CSR, dan cache SSR dalam satu file di proyek Next.js yang sebenarnya, Anda dapat memperluasnya seperti di bawah ini. File ini juga bukan hasil otomatis, tetapi kode proyek.

rxjsHttpService.ts

File commonServiceFile yang dimaksud adalah file ini.

commonServiceFile dari generator OpenAPI bukanlah opsi untuk menghasilkan file di atas. Ini menentukan jalur file proyek yang mengimpor callApi, callApiStream, callApiClientCache, atau callApiServerCache. Oleh karena itu, sebelum mengatur generator, Anda harus terlebih dahulu menentukan peran dan ekspor file ini.

4. Pilihan: Jika menggunakan layanan otomatisasi pembuatan Swagger,

Setelah menghubungkan generator service OpenAPI, tidak perlu menulis ulang URL dan tipe respons di layar. Cukup impor fungsi yang dihasilkan dan hanya berikan path, params, dan body yang diperlukan.

MemberSearchPage.tsx

tsx

Dokumen berikut

Klien HTTP

Memeriksa kode lengkap commonService dan peran masing-masing komponen.

Mulai Cepat

Periksa seluruh cara penggunaan pustaka terlebih dahulu, kemudian lanjutkan untuk memeriksa contoh panggilan nyata Front/Backend dari proyek WebFlux + Swagger otomatis.

OpenAPI Generator

Periksa aturan di swagger.json untuk tipe dan layanan yang dihasilkan.