mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
chore: 移除上一个版本废弃的 API
This commit is contained in:
winixt
parent
060924e241
commit
b12f86bbbf
@ -1,17 +1,20 @@
|
||||
# @fesjs/plugin-request
|
||||
|
||||
基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-request": "^2.0.0"
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### 构建时配置
|
||||
@ -19,32 +22,19 @@
|
||||
```js
|
||||
export default {
|
||||
request: {
|
||||
dataField: 'result'
|
||||
dataField: 'result',
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### dataField
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
`dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。
|
||||
|
||||
|
||||
#### base(即将废弃)
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
`base` 接口前缀。
|
||||
|
||||
::: warning 即将废弃
|
||||
这个字段将在下个版本废弃，推荐使用 [axios baseURL](https://github.com/axios/axios)。
|
||||
:::
|
||||
|
||||
### 运行时配置
|
||||
|
||||
在 `app.js` 中进行运行时配置。
|
||||
@ -52,9 +42,7 @@ export default {
|
||||
```js
|
||||
export const request = {
|
||||
// 格式化 response.data (只有 response.data 类型为 object 才会调用)
|
||||
responseDataAdaptor: (data) => {
|
||||
|
||||
},
|
||||
responseDataAdaptor: (data) => {},
|
||||
// 关闭 response data 校验（只判断 xhr status）
|
||||
closeResDataCheck: false,
|
||||
// 请求拦截器
|
||||
@ -68,57 +56,58 @@ export const request = {
|
||||
11199(response) {
|
||||
// 特殊 code 处理逻辑
|
||||
},
|
||||
404(error) {
|
||||
},
|
||||
404(error) {},
|
||||
default(error) {
|
||||
// 异常统一处理
|
||||
}
|
||||
},
|
||||
},
|
||||
// 其他 axios 配置
|
||||
...otherConfigs
|
||||
}
|
||||
...otherConfigs,
|
||||
};
|
||||
```
|
||||
|
||||
#### skipErrorHandler
|
||||
|
||||
- 类型： `boolean | string | number | array<string | number>`
|
||||
- 默认值： ``
|
||||
- 详情：
|
||||
- 类型： `boolean | string | number | array<string | number>`
|
||||
- 默认值： ``
|
||||
- 详情：
|
||||
|
||||
指定当前请求的某些错误状态不走 `errorHandler`，单独进行处理。如果设置为 `true`，当前请求的错误处理都不走 `errorHandler`。
|
||||
|
||||
- 示列：
|
||||
- 示列：
|
||||
|
||||
```js
|
||||
import {request} from '@fesjs/fes';
|
||||
import { request } from '@fesjs/fes';
|
||||
|
||||
request('/api/login', null, {
|
||||
skipErrorHandler: '110'
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 这里处理 code 为 110 的异常
|
||||
// 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
|
||||
skipErrorHandler: '110',
|
||||
})
|
||||
.then((res) => {
|
||||
// do something
|
||||
})
|
||||
.catch((err) => {
|
||||
// 这里处理 code 为 110 的异常
|
||||
// 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
### 发起一个普通 post 请求
|
||||
|
||||
```js
|
||||
import {request} from '@fesjs/fes';
|
||||
import { request } from '@fesjs/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 处理异常
|
||||
password: '123456',
|
||||
})
|
||||
.then((res) => {
|
||||
// do something
|
||||
})
|
||||
.catch((err) => {
|
||||
// 处理异常
|
||||
});
|
||||
```
|
||||
|
||||
### merge 重复请求
|
||||
@ -128,84 +117,87 @@ request('/api/login', {
|
||||
当发生 `REPEAT` 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
|
||||
|
||||
```js
|
||||
import {request} from '@fesjs/fes';
|
||||
import { request } from '@fesjs/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
}, {
|
||||
mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 处理异常
|
||||
})
|
||||
request(
|
||||
'/api/login',
|
||||
{
|
||||
username: 'robby',
|
||||
password: '123456',
|
||||
},
|
||||
{
|
||||
mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
|
||||
},
|
||||
)
|
||||
.then((res) => {
|
||||
// do something
|
||||
})
|
||||
.catch((err) => {
|
||||
// 处理异常
|
||||
});
|
||||
```
|
||||
|
||||
### 请求节流(即将废弃)
|
||||
|
||||
|
||||
::: warning 即将废弃
|
||||
因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行
|
||||
:::
|
||||
|
||||
### 请求缓存
|
||||
|
||||
```js
|
||||
import {request} from '@fesjs/fes';
|
||||
import { request } from '@fesjs/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
}, {
|
||||
cache: {
|
||||
cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
|
||||
cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
|
||||
request(
|
||||
'/api/login',
|
||||
{
|
||||
username: 'robby',
|
||||
password: '123456',
|
||||
},
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 处理异常
|
||||
})
|
||||
{
|
||||
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 '@fesjs/fes';
|
||||
|
||||
import { useRequest } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const {loading, data, error} = useRequest('/api/login', {
|
||||
const { loading, data, error } = useRequest('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
})
|
||||
password: '123456',
|
||||
});
|
||||
|
||||
return {
|
||||
loading,
|
||||
data,
|
||||
error
|
||||
}
|
||||
}
|
||||
}
|
||||
error,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### request
|
||||
|
||||
- **类型**：函数
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：请求后端接口
|
||||
- **参数**：
|
||||
- url: 后端接口 url
|
||||
- data: 参数
|
||||
- options: 配置（ 支持 axios 所有配置）
|
||||
- **返回值**: Promise
|
||||
- **详情**：请求后端接口
|
||||
- **参数**：
|
||||
- url: 后端接口 url
|
||||
- data: 参数
|
||||
- options: 配置（ 支持 axios 所有配置）
|
||||
- **返回值**: Promise
|
||||
|
||||
### useRequest
|
||||
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import { Logger } from '@fesjs/compiler';
|
||||
import { readFileSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
import { name } from '../package.json';
|
||||
|
||||
const logger = new Logger('fes:plugin-request');
|
||||
|
||||
export default (api) => {
|
||||
api.addRuntimePluginKey(() => 'request');
|
||||
// 配置
|
||||
@ -32,19 +29,11 @@ export default (api) => {
|
||||
const requestTemplate = readFileSync(join(__dirname, 'template', 'request.js'), 'utf-8');
|
||||
api.onGenerateFiles(() => {
|
||||
// 文件写出
|
||||
const { dataField = '', base = '' } = api.config.request;
|
||||
|
||||
if (base) {
|
||||
// DEPRECATED
|
||||
logger.warn('[DEPRECATED]: reqeust base 即将废弃，建议使用 axios baseURL代替：https://github.com/axios/axios');
|
||||
}
|
||||
const { dataField = '' } = api.config.request;
|
||||
|
||||
api.writeTmpFile({
|
||||
path: absoluteFilePath,
|
||||
content: requestTemplate
|
||||
.replace('REPLACE_DATA_FIELD', JSON.stringify(dataField))
|
||||
.replace('REPLACE_BASE', base || '')
|
||||
.replace('AXIOS_PATH', 'axios'),
|
||||
content: requestTemplate.replace('REPLACE_DATA_FIELD', JSON.stringify(dataField)).replace('AXIOS_PATH', 'axios'),
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import setDataField from './setDataField';
|
||||
import paramsProcess from './paramsProcess';
|
||||
import genRequestKey from './genRequestKey';
|
||||
import preventRepeatReq from './preventRepeatReq';
|
||||
import throttle from './throttle';
|
||||
import cacheControl from './cacheControl';
|
||||
import resDataAdaptor from './resDataAdaptor';
|
||||
import resErrorProcess from './resErrorProcess';
|
||||
@ -71,7 +70,6 @@ function getRequestInstance() {
|
||||
.use(genRequestKey)
|
||||
.use(cacheControl)
|
||||
.use(preventRepeatReq)
|
||||
.use(throttle)
|
||||
.use(axiosMiddleware)
|
||||
.use(resDataAdaptor)
|
||||
.use(resErrorProcess)
|
||||
@ -89,18 +87,8 @@ function getRequestInstance() {
|
||||
};
|
||||
}
|
||||
|
||||
// DEPRECATED 废弃，使用 axios baseURL
|
||||
function handleApiPathBase(url, options = {}) {
|
||||
if (url.startsWith('http')) return url;
|
||||
|
||||
if (options.base) {
|
||||
return `${options.base}${url}`;
|
||||
}
|
||||
return `REPLACE_BASE${url}`;
|
||||
}
|
||||
|
||||
function userConfigHandler(url, data, options = {}) {
|
||||
options.url = handleApiPathBase(url, options);
|
||||
options.url = url;
|
||||
options.method = (options.method || 'post').toUpperCase();
|
||||
if (checkHttpRequestHasBody(options.method)) {
|
||||
options.data = data;
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
|
||||
const throttleMap = new Map();
|
||||
|
||||
export default async (ctx, next) => {
|
||||
if (ctx.config.throttle) {
|
||||
if (throttleMap.get(ctx.key) >= Date.now()) {
|
||||
ctx.error = {
|
||||
type: 'FREQUENTLY',
|
||||
msg: '请求过于频繁'
|
||||
};
|
||||
return;
|
||||
}
|
||||
}
|
||||
await next();
|
||||
throttleMap.set(ctx.key, Date.now() + ctx.config.throttle);
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user