blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity

feat: 优化 request，添加 mergeRequest 配置参数

Browse Source
This commit is contained in:
winixt 2021-05-24 21:18:03 +08:00
parent bb2f25f644
commit 8444f64f10
4 changed files with 112 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/zh/reference/plugin/plugins/request.md
View File

@ -117,6 +117,27 @@ request('/api/login', {
})
```
### merge 重复请求
连续发送多个请求，会被合并成一个请求，不会报 `REPEAT` 接口错误。
当发生 `REPEAT` 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
```js
import {request} from '@fesjs/fes';
request('/api/login', {
username: 'robby',
password: '123456'
}, {
mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
}).then((res) => {
// do something
}).catch((err) => {
// 处理异常
})
```
### 请求节流
```js
@ -145,7 +166,7 @@ request('/api/login', {
}, {
cache: {
cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
cacheTime: 1000 * 60 * 3 // 缓存时间，默认3min
cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
},
}).then((res) => {
// do something
@ -156,6 +177,7 @@ request('/api/login', {
若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。
### 结合 use 使用
```js

24
packages/fes-plugin-request/src/template/cacheControl.js
View File

@ -39,7 +39,6 @@ import {
const CACHE_KEY_PREFIX = '__FES_REQUEST_CACHE:';
const CACHE_TYPE = {
merge: 'merge', // merge 重复请求
ram: 'ram',
session: 'sessionStorage',
local: 'localStorage'
@ -64,9 +63,6 @@ function setCacheData({
data,
cacheTime = 1000 * 60 * 3
}) {
// merge 类型没有缓存
if (cacheType === CACHE_TYPE.merge) return;
const _key = genInnerKey(key, cacheType);
const currentCacheData = {
@ -100,9 +96,6 @@ function isExpire({ expire, cacheTime }) {
}
function getCacheData({ key, cacheType = 'ram' }) {
// merge 类型没有缓存
if (cacheType === CACHE_TYPE.merge) return;
const _key = genInnerKey(key, cacheType);
if (cacheType !== CACHE_TYPE.ram) {
const cacheInstance = window[CACHE_TYPE[cacheType]];
@ -170,20 +163,9 @@ function handleCachingQueueError(ctx, config) {
const _key = genInnerKey(ctx.key, config.cache.cacheType);
const queue = cachingQueue.get(_key);
if (queue && queue.length > 0) {
// 非 merge 类型，进行队列重试，直到有一个请求成功，后面的全部成功
if (config.cache.cacheType !== CACHE_TYPE.merge) {
const firstResolve = queue.shift();
firstResolve();
cachingQueue.set(_key, queue);
} else {
queue.forEach((resolve) => {
resolve({
error: ctx.error
});
});
cachingQueue.delete(_key);
cacheStartFlag.delete(_key);
}
const firstResolve = queue.shift();
firstResolve();
cachingQueue.set(_key, queue);
} else {
cachingQueue.delete(_key);
cacheStartFlag.delete(_key);

66
packages/fes-plugin-request/src/template/preventRepeatReq.js
View File

@ -1,17 +1,63 @@
const requestMap = new Map();
export default async (ctx, next) => {
const key = ctx.key;
if (requestMap.get(key)) {
ctx.error = {
type: 'REPEAT',
msg: '重复请求'
};
return;
const mergeRequestMap = new Map();
const requestQueue = new Map();
function handleCachingStart(ctx) {
const isRequesting = mergeRequestMap.get(ctx.key);
if (isRequesting) {
return new Promise((resolve) => {
const queue = requestQueue.get(ctx.key) || [];
requestQueue.set(ctx.key, queue.concat(resolve));
});
}
mergeRequestMap.set(ctx.key, true);
}
function handleRepeatRequest(ctx) {
const queue = requestQueue.get(ctx.key);
if (queue && queue.length > 0) {
queue.forEach((resolve) => {
if (ctx.error) {
resolve({
error: ctx.error
});
} else {
resolve({
response: ctx.response
});
}
});
}
requestQueue.delete(ctx.key);
mergeRequestMap.delete(ctx.key);
}
export default async (ctx, next) => {
if (ctx.config.mergeRequest) {
const result = await handleCachingStart(ctx);
if (result) {
Object.keys(result).forEach((key) => {
ctx[key] = result[key];
});
return;
}
} else {
if (requestMap.get(ctx.key) && !ctx.config.mergeRequest) {
ctx.error = {
type: 'REPEAT',
msg: '重复请求'
};
return;
}
requestMap.set(ctx.key, true);
}
requestMap.set(key, true);
await next();
requestMap.delete(key);
if (ctx.config.mergeRequest) {
handleRepeatRequest(ctx);
} else {
requestMap.delete(ctx.key);
}
};

54
packages/fes-template-h5/src/pages/index.vue
View File

@ -22,9 +22,21 @@ export default {
const clickIcon = () => {
console.log('click Icon');
};
request('/api', null).then((res) => {
console.log(res);
});
// request('/api', null, {
// mergeRequest: true
// }).then((res) => {
// console.log(res);
// });
// request('/api', null, {
// mergeRequest: true
// }).then((res) => {
// console.log(res);
// });
// request('/api', null, {
// mergeRequest: true
// }).then((res) => {
// console.log(res);
// });
// request('/api', null, {
// throttle: 3000,
// cache: true
@ -56,27 +68,21 @@ export default {
// });
// }, 3200);
// request('/api', null, {
// cache: {
// cacheType: 'merge'
// }
// }).then((res) => {
// console.log(res);
// });
// request('/api', null, {
// cache: {
// cacheType: 'merge'
// }
// }).then((res) => {
// console.log(res);
// });
// request('/api', null, {
// cache: {
// cacheType: 'merge'
// }
// }).then((res) => {
// console.log(res);
// });
request('/api', null, {
cache: true
}).then((res) => {
console.log(res);
});
request('/api', null, {
cache: true
}).then((res) => {
console.log(res);
});
request('/api', null, {
cache: true
}).then((res) => {
console.log(res);
});
// request('/api', null, {
// // skipErrorHandler: [500]