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