diff --git a/docs/reference/plugin/plugins/request.md b/docs/reference/plugin/plugins/request.md index 9332ab33..b92d24ed 100644 --- a/docs/reference/plugin/plugins/request.md +++ b/docs/reference/plugin/plugins/request.md @@ -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,42 +22,27 @@ ```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` 中进行运行时配置。 - + ```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` -- 默认值： `` -- 详情： +- 类型： `boolean | string | number | array` +- 默认值： `` +- 详情： 指定当前请求的某些错误状态不走 `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 diff --git a/packages/fes-plugin-request/src/index.js b/packages/fes-plugin-request/src/index.js index 9cca0f6c..dd08120f 100644 --- a/packages/fes-plugin-request/src/index.js +++ b/packages/fes-plugin-request/src/index.js @@ -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'), }); }); diff --git a/packages/fes-plugin-request/src/template/request.js b/packages/fes-plugin-request/src/template/request.js index abe392a6..e208d9cd 100644 --- a/packages/fes-plugin-request/src/template/request.js +++ b/packages/fes-plugin-request/src/template/request.js @@ -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; diff --git a/packages/fes-plugin-request/src/template/throttle.js b/packages/fes-plugin-request/src/template/throttle.js deleted file mode 100644 index 1eb13b5d..00000000 --- a/packages/fes-plugin-request/src/template/throttle.js +++ /dev/null @@ -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); -};