HTTP Client
Trước tiên, tôi sẽ giải thích cách sử dụng trực tiếp Core client, sau đó sẽ giải thích ví dụ tích hợp tùy chọn của bộ chuyển đổi HTTP chung mà dịch vụ tạo tự động sử dụng.
Sử dụng trực tiếp Core client.
Paths được tiêm vào createHttpClient<Paths>() là hợp đồng yêu cầu. URL và phương thức được xác định từ khóa của Paths, queryString và pathVariable từ parameters, body từ requestBody.
Loại phản hồi được chỉ định bởi R trong callApi<R>(). Core không tự động suy luận loại phản hồi từ OpenAPI responses.
httpClient.ts
tsHình dạng phản hồi được chọn theo từng API.
typed-rx-http không bắt buộc ResponseWrapper. Nếu phản hồi từ máy chủ là wrapper, hãy chỉ định loại wrapper là R, nếu không thì chỉ định loại phản hồi thực tế.
Tùy chọn: bộ chuyển đổi chung của dự án + dịch vụ tạo tự động.
Cấu hình commonService dưới đây không phải là cấu trúc bắt buộc của Core, mà là mẫu tích hợp dự án nhằm áp dụng đồng thời xác thực, header SSR và chính sách cache cho nhiều dịch vụ tạo.
Công việc của commonService trong dự án.
commonService không phải là tên lớp đặc biệt do @byeolnaerim/typed-rx-http cung cấp, mà là tệp thuộc sở hữu của người dùng được sử dụng để tập hợp chính sách HTTP chung của dự án. Tên tệp có thể tự do và trong ví dụ dưới đây, tên dự án thực tế là rxjsHttpService.ts.
Không lặp lại createHttpClient cho mỗi giao diện và dịch vụ tự động tạo, mà sử dụng callApi và callApiStream được tạo ra từ tệp này làm điểm truy cập chung. Do đó, nếu bạn sửa đổi quy tắc xác thực, truyền header SSR, cache và xử lý lỗi một lần, nó sẽ được áp dụng cho tất cả các dịch vụ đã tạo.
Xem toàn bộ mã commonService/rxjsHttpService.
1. Kiểu hoàn chỉnh tối thiểu
Bản chất của commonService là mã dưới đây. Tạo một lần headerStore và client HTTP kiểu, sau đó export callApi/callApiStream để dịch vụ được tạo có thể sử dụng chung. uploadFile và createSSEObservable cũng có thể được lộ ra từ client đó.
rxjsHttpService.ts
ts2. Kiểu mở rộng bao gồm Next.js + xác thực phiên + bộ nhớ đệm CSR/SSR
Dưới đây là ví dụ toàn bộ dự án đã thêm xác thực phiên, header SSR và bộ nhớ đệm CSR/SSR vào adapter công cộng giống nhau. Nếu dự án được tạo dịch vụ nhập cả wrapper bộ nhớ đệm, thì hình thức này sẽ là tiêu chuẩn. Chỉ cần sao chép, sau đó điều chỉnh setLogin import, vị trí ApiTypes và CacheNames, đường dẫn API xác thực, biến môi trường và đường dẫn không được phép theo cách của riêng bạn.
rxjsHttpService.ts
tsVai trò theo cấu hình mã
paths
Đây là loại đường dẫn OpenAPI được sử dụng khi createHttpClient và ServiceArguments kiểm tra URL, phương thức, biến đường dẫn, truy vấn và kiểu body.
headerStore
Trình duyệt lưu trữ các header chung như Content-Type và Authorization và chia sẻ chúng với xác thực phiên và kết nối RSocket.
headersProvider
Trong CSR, trả về headerStore và trong SSR, đọc Cookie và Authorization của yêu cầu hiện tại để cung cấp header khác nhau cho mỗi yêu cầu.
service
HTTP client thực tế có kiểu đã gán với base URL, header chung, xử lý 401 của máy chủ và thông báo lỗi cơ bản.
sessionAuth
Đồng bộ hóa token phiên trước khi yêu cầu và nếu 401 thì thử lại Observable ban đầu một lần sau khi làm mới, nếu thất bại thì thực hiện quy trình đăng xuất.
callApi / callApiStream
Hàm chung được nhập khẩu bởi dịch vụ REST tự động tạo và dịch vụ luồng NDJSON. Cả hai đều trả về RxJS Observable.
callApiClientCache / callApiServerCache
Trình bao bọc cache động gọi cache SSR của @byeolnaerim/typed-rx-http/next trong khi trình duyệt sử dụng cache CSR.
Cách kết nối với dịch vụ tự động tạo
Trình tạo tính toán đường dẫn tương đối của commonServiceFile để thêm import vào từng dịch vụ. Giao diện không gọi trực tiếp tệp công cộng mà nhập các hàm đã tạo, và hàm tạo chuyển đổi path, params, body thành pathVariable, queryString, body của ServiceArguments để truyền cho callApi.
generateSwagger.cjs
jsMột phản hồi là firstValueFrom
Các REST API như tìm kiếm, lưu trữ, xóa chỉ phản hồi một lần và kết thúc có thể nhận Observable đã tạo.firstValueFromđể sử dụng một cách tự nhiên ngay cả trong các hàm async hiện có.
BusinessSearchPage.tsx
tsxTrên màn hình chỉ hiển thị paramsnhưng trong dịch vụ đã tạo có URL, phương thức HTTP và loại phản hồi. Tham số truy vấn luôn được{ params: { ... } }truyền đi.
Nhiều phản hồi là subscribe
Yêu cầu có nhiều giá trị đến như tiến độ công việc hoặc luồng RSocketsubscribeđược nhận và hủy đăng ký khi thành phần biến mất.
BatchJobPage.tsx
tsxKhi sử dụng callApi trực tiếp
Khi không sử dụng trình tạo dịch vụ hoặc kiểm tra endpoint tạm thời trước khi tạo, có thể gọi trực tiếp callApi của dịch vụ công cộng. Kiểu yêu cầu được kiểm tra trong paths và kiểu phản hồi được chỉ định bởi người gọi dưới dạng generic.