mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
feat: 添加 icon 和 request 文档
This commit is contained in:
bac-joker
parent
127efdb022
commit
811a94f71b
@ -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
|
||||
## 使用
|
||||
|
||||
新建 `src/icons` 目录，将 svg 文件放入其中，在 `component` 中引用：
|
||||
|
||||
```jsx
|
||||
<fes-icon type="iconName" />
|
||||
```
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性 | 说明 | 类型 |
|
||||
| :-----| :---- | :---- |
|
||||
| type | svg 文件名 | `string` |
|
||||
| spin | 是否无限旋转 | `boolean` |
|
||||
| rotate | 旋转角度 | `number` |
|
||||
|
||||
@ -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
|
||||
### 构建时配置
|
||||
|
||||
```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`
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -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()
|
||||
|
||||
36
yarn.lock
36
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user