chore: 移除上一个版本废弃的 API

This commit is contained in:
winixt 2022-05-12 10:59:32 +08:00
parent 060924e241
commit b12f86bbbf
4 changed files with 90 additions and 137 deletions

View File

@ -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: sessionStoragelocallocalStorage
cacheTime: 1000 * 60 * 3 // 缓存时间默认3min
}, },
}).then((res) => { {
// do something cache: {
}).catch((err) => { cacheType: 'ram', // ram: 内存session: sessionStoragelocallocalStorage
// 处理异常 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

View File

@ -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'),
}); });
}); });

View File

@ -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;

View File

@ -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);
};