diff --git a/docs/zh/reference/plugin/plugins/icon.md b/docs/zh/reference/plugin/plugins/icon.md index a67c2dfa..1b7f693c 100644 --- a/docs/zh/reference/plugin/plugins/icon.md +++ b/docs/zh/reference/plugin/plugins/icon.md @@ -1,7 +1,32 @@ # @webank/fes-plugin-icon +## 介绍 + +提供以 `component` 的方式，直接使用 svg icon 的能力。 ## 启用方式 -## 配置 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@webank/fes": "^2.0.0", + "@webank/fes-plugin-icon": "^2.0.0" + }, +} +``` -## API \ No newline at end of file +## 使用 + +新建 `src/icons` 目录，将 svg 文件放入其中，在 `component` 中引用： + +```jsx + +``` + +### 属性 + +| 属性 | 说明 | 类型 | +| :-----| :---- | :---- | +| type | svg 文件名 | `string` | +| spin | 是否无限旋转 | `boolean` | +| rotate | 旋转角度 | `number` | diff --git a/docs/zh/reference/plugin/plugins/request.md b/docs/zh/reference/plugin/plugins/request.md index 0a3049b7..ac056937 100644 --- a/docs/zh/reference/plugin/plugins/request.md +++ b/docs/zh/reference/plugin/plugins/request.md @@ -1,8 +1,157 @@ # @webank/fes-plugin-request - +基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。 ## 启用方式 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@webank/fes": "^2.0.0", + "@webank/fes-plugin-request": "^2.0.0" + }, +} +``` ## 配置 -## API \ No newline at end of file +### 构建时配置 + +```js +export default { + request: { + dataField: 'result', + }, +} +``` + +#### dataField + +- 类型： `string` +- 默认值： `''` +- 详情： + + `dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。 + +### 运行时配置 + +在 `app.js` 中进行运行时配置。 + +```js +export const request = { + // 格式化 response.data (只有 response.data 类型为 object 才会调用) + responseDataAdaptor: (data) => { + + }, + // 请求拦截器 + requestInterceptors: [], + // 相应拦截器 + responseInterceptors: [], + // 错误处理 + // 内部以 reponse.data.code === '0' 判断请求是否成功 + // 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式 + errorHandler: { + 11199: (response) => { + + }, + 404: (error) => { + + } + }, + // 其他 axios 配置 + ...otherConfigs +} +``` +## 使用 + +### 发起一个普通 post 请求 + +```js +import {request} from '@webank/fes'; + +request('/api/login', { + username: 'robby', + password: '123456' +}).then((res) => { + // do something +}).catch((err) => { + // 处理异常 +}) +``` + +### 请求节流 + +```js +import {request} from '@webank/fes'; + +request('/api/login', { + username: 'robby', + password: '123456' +}, { + throttle: 1000, // 1 秒内只能发起一次请求 +}).then((res) => { + // do something +}).catch((err) => { + // 处理异常 +}) +``` + +### 请求缓存 + +```js +import {request} from '@webank/fes'; + +request('/api/login', { + username: 'robby', + password: '123456' +}, { + cache: { + cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage + cacheTime: 1000 * 60 * 3 // 缓存时间，默认3min + }, +}).then((res) => { + // do something +}).catch((err) => { + // 处理异常 +}) +``` + +若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。 + +### 结合 use 使用 + +```js +import {useRequest} from '@webank/fes'; + + +export default { + setup() { + const {loading, data, error} = useRequest('/api/login', { + username: 'robby', + password: '123456' + }) + + return { + loading, + data, + error + } + } +} +``` + +## API + +### request + +- **类型**：函数 + +- **详情**：请求后端接口 +- **参数**： + - url: 后端接口 url + - data: 参数 + - options: 配置（ 支持 axios 所有配置） +- **返回值**: Promise + +### useRequest + +request 的封装，返回响应式 `loading`、`error`、 `data` diff --git a/packages/fes-plugin-request/src/template/helpers.js b/packages/fes-plugin-request/src/template/helpers.js index c0314996..05b52320 100644 --- a/packages/fes-plugin-request/src/template/helpers.js +++ b/packages/fes-plugin-request/src/template/helpers.js @@ -84,8 +84,6 @@ export function trimObj(obj) { obj[key] = value.trim(); } else if (isObject(value)) { trimObj(value); - } else if (Array.isArray(value)) { - trimObj(value); } }); } diff --git a/packages/fes-plugin-request/src/template/request.js b/packages/fes-plugin-request/src/template/request.js index fad41688..744d29c6 100644 --- a/packages/fes-plugin-request/src/template/request.js +++ b/packages/fes-plugin-request/src/template/request.js @@ -46,7 +46,6 @@ async function axiosMiddleware(context, next) { function getRequestInstance() { const { responseDataAdaptor, - errorConfig, requestInterceptors = [], responseInterceptors = [], errorHandler, @@ -82,7 +81,6 @@ function getRequestInstance() { defaultConfig, dataField: REPLACE_DATA_FIELD, // eslint-disable-line responseDataAdaptor, - errorConfig, errorHandler }, request: scheduler.compose() diff --git a/yarn.lock b/yarn.lock index a622dffc..59e3fe5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7528,6 +7528,11 @@ es-module-lexer@^0.3.26: resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b" integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA== +es-module-lexer@^0.4.0: + version "0.4.1" + resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz#dda8c6a14d8f340a24e34331e0fab0cb50438e0e" + integrity sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA== + es-to-primitive@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" @@ -16631,7 +16636,7 @@ webpack-sources@^2.1.1, webpack-sources@^2.2.0: source-list-map "^2.0.1" source-map "^0.6.1" -webpack@^5.18.0, webpack@^5.21.0: +webpack@^5.18.0: version "5.21.2" resolved "https://registry.npmjs.org/webpack/-/webpack-5.21.2.tgz#647507e50d3637695be28af58a6a8246050394e7" integrity sha512-xHflCenx+AM4uWKX71SWHhxml5aMXdy2tu/vdi4lClm7PADKxlyDAFFN1rEFzNV0MAoPpHtBeJnl/+K6F4QBPg== @@ -16660,6 +16665,35 @@ webpack@^5.18.0, webpack@^5.21.0: watchpack "^2.0.0" webpack-sources "^2.1.1" +webpack@^5.24.2: + version "5.24.3" + resolved "https://registry.npmjs.org/webpack/-/webpack-5.24.3.tgz#6ec0f5059f8d7c7961075fa553cfce7b7928acb3" + integrity sha512-x7lrWZ7wlWAdyKdML6YPvfVZkhD1ICuIZGODE5SzKJjqI9A4SpqGTjGJTc6CwaHqn19gGaoOR3ONJ46nYsn9rw== + dependencies: + "@types/eslint-scope" "^3.7.0" + "@types/estree" "^0.0.46" + "@webassemblyjs/ast" "1.11.0" + "@webassemblyjs/wasm-edit" "1.11.0" + "@webassemblyjs/wasm-parser" "1.11.0" + acorn "^8.0.4" + browserslist "^4.14.5" + chrome-trace-event "^1.0.2" + enhanced-resolve "^5.7.0" + es-module-lexer "^0.4.0" + eslint-scope "^5.1.1" + events "^3.2.0" + glob-to-regexp "^0.4.1" + graceful-fs "^4.2.4" + json-parse-better-errors "^1.0.2" + loader-runner "^4.2.0" + mime-types "^2.1.27" + neo-async "^2.6.2" + schema-utils "^3.0.0" + tapable "^2.1.1" + terser-webpack-plugin "^5.1.1" + watchpack "^2.0.0" + webpack-sources "^2.1.1" + webpackbar@^5.0.0-3: version "5.0.0-3" resolved "https://registry.npmjs.org/webpackbar/-/webpackbar-5.0.0-3.tgz#f4f96c8fb13001b2bb1348252db4c980ab93aaac"