feat: pre-set serialization methods for request parameters #5814
Conversation
mynetfan
requested review from
a team,
anncwb,
jinmao88 and
vince292007
as code owners
|
WalkthroughThe changes add extended configuration options for Axios-based requests by integrating qs-based parameter serialization and custom response handling. A new generic TypeScript type, Changes
Sequence Diagram(s)sequenceDiagram
participant UI as Demo UI
participant API as getParamsData
participant RC as RequestClient
participant QS as qs.stringify
UI->>API: User selects a serialization method
API->>RC: Make GET request with params & serializer option
RC->>QS: Call getParamsSerializer(serializer)
QS-->>RC: Return serialized parameters
RC-->>API: Process request and return response
API-->>UI: Update UI with received response
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
playground/src/api/examples/params.ts (1)
5-17: Consider enhancing documentation for serialization typesThe function implementation is clean and well-typed, but would benefit from more detailed documentation explaining the differences between the serialization types ('brackets', 'comma', 'indices', 'repeat') and when to use each one.
/** * 发起数组请求 + * + * @param params - The parameters to send with the request + * @param type - The serialization method to use: + * - 'brackets': Serializes arrays using bracket notation, e.g., 'colors[]=blue&colors[]=green' + * - 'comma': Serializes arrays as comma-separated values, e.g., 'colors=blue,green' + * - 'indices': Serializes arrays with indices, e.g., 'colors[0]=blue&colors[1]=green' + * - 'repeat': Serializes arrays by repeating the key, e.g., 'colors=blue&colors=green' */playground/src/views/demos/features/request-params-serializer/index.vue (1)
1-26: Good implementation of parameter serialization demonstration.The component demonstrates the parameter serialization feature effectively. A few suggestions for improvement:
- The comment on line 16 is unnecessary and can be removed
- Add error handling to the API call
- Consider using a more reliable method to get the serialized URL parameters instead of relying on
responseURLHere's a suggested improvement:
- watchEffect(() => { - getParamsData(params, paramsSerializer.value).then((res) => { - response.value = res.request.responseURL; - }); - }); + watchEffect(() => { + getParamsData(params, paramsSerializer.value) + .then((res) => { + response.value = res.request.responseURL; + }) + .catch((error) => { + console.error('Failed to get params data:', error); + response.value = ''; + }); + });packages/effects/request/src/request-client/request-client.ts (1)
14-36: Suggestion: Add unit tests for parameter serializationThis new functionality introduces several serialization formats, which should be covered by unit tests to ensure correct behavior and prevent regressions.
Consider adding tests for:
- Each predefined serialization format ('brackets', 'comma', 'indices', 'repeat')
- Custom serialization functions
- Edge cases (undefined parameters, empty arrays, nested objects)
- Handling of invalid formats
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
docs/src/guide/essentials/server.md(1 hunks)packages/effects/request/package.json(1 hunks)packages/effects/request/src/request-client/request-client.ts(3 hunks)packages/effects/request/src/request-client/types.ts(1 hunks)playground/src/api/examples/params.ts(1 hunks)playground/src/locales/langs/zh-CN/demos.json(1 hunks)playground/src/router/routes/modules/demos.ts(1 hunks)playground/src/views/demos/features/request-params-serializer/index.vue(1 hunks)pnpm-workspace.yaml(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
packages/effects/request/src/request-client/request-client.ts (1)
packages/effects/request/src/request-client/types.ts (1)
RequestClientOptions(76-76)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Lint (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
🔇 Additional comments (13)
playground/src/locales/langs/zh-CN/demos.json (1)
53-54: Well-structured localization entryThe new localization entry for "requestParamsSerializer" follows the established pattern in the file and properly provides a Chinese translation for the parameter serialization feature.
packages/effects/request/package.json (2)
25-26: Appropriate dependencies addedThe addition of the
qslibrary is necessary for implementing parameter serialization functionality.
29-30: TypeScript typing properly supportedThe inclusion of
@types/qsas a dev dependency ensures proper TypeScript typing support, following best practices.pnpm-workspace.yaml (2)
53-53: Appropriate type definition version addedThe addition of
@types/qswith version^6.9.18in the catalog section is correctly placed in alphabetical order and uses proper semantic versioning.
143-143: Appropriate library version addedThe addition of
qswith version^6.14.0in the catalog section is correctly placed in alphabetical order and uses proper semantic versioning.docs/src/guide/essentials/server.md (1)
113-141: Documentation for new parameter serialization options looks good!The new documentation clearly explains the extended configuration options with proper descriptions for each serialization method and response return type. This addition helps developers understand how to use the new features effectively.
playground/src/router/routes/modules/demos.ts (1)
246-257: New route for parameter serializer demo correctly configured.The route is properly added to the features section with appropriate naming, path, and icon. The title uses the translation key for internationalization which is good practice.
packages/effects/request/src/request-client/types.ts (2)
8-29: Well-designed type enhancements for parameter serialization.The
ExtendOptionstype has been properly enhanced with:
- A generic type parameter for better type safety
- The new
paramsSerializerproperty with clear documentation- Four preset options plus support for custom Axios serializer functions
The type definition is well-structured and maintains backward compatibility.
30-30: Updated RequestClientConfig to use generic ExtendOptions.The
RequestClientConfigtype now correctly uses the generic version ofExtendOptions, maintaining type consistency throughout the application.playground/src/views/demos/features/request-params-serializer/index.vue (1)
27-61: Clean and intuitive UI for demonstrating parameter serialization.The template is well-structured with a good layout showing:
- The parameters to be submitted
- The resulting serialized URL
- The extracted parameter string and its decoded version
The use of Radio buttons for selecting the serialization method provides a clear and intuitive interface.
packages/effects/request/src/request-client/request-client.ts (3)
5-5: Imports look goodThe addition of
isStringfrom the utils package and theqslibrary are appropriate for the new parameter serialization functionality.Also applies to: 8-8
67-69: Implementation in constructor looks goodThe integration of the
getParamsSerializerfunction in the constructor ensures that the appropriate serialization method is applied for all requests based on the provided configuration.
139-141: Request method implementation is correctThe conditional inclusion of the
paramsSerializerin the request configuration allows for dynamic serialization of parameters on a per-request basis. This approach provides flexibility while maintaining a clean implementation.
1 participant
Description
在网络请求中，针对数组参数的处理预置几种参数序列化方式，使得各个应用能更方便地对接不同后台
fixed: #5702
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Documentation
Chores