一、为什么要写这个文章? 处理重复请求的文章想必大家也看过了很多,大多数都是分为在response返回之前发现重复请求就return掉的和使用节流/防抖来间接规避用户频繁操作两种版
处理重复请求的文章想必大家也看过了很多,大多数都是分为在response返回之前发现重复请求就return掉的和使用节流/防抖来间接规避用户频繁操作两种版本的。最近在使用的过程的中,发现这两个版本在某些场景下还是有些局限性。
如图,我这个h5的页面,顶部和底部都要显示这个名片组件。这些名片的信息是通过一个接口来获取的,当这个组件在当前页面被初始化时,就会发生两次重复的请求。
这时会面临几个抉择:
1. 不对重复请求做任何处理。
2. 对重复请求直接return掉。这也是部分文章的做法,不过这种做法有种局限性,就是直接认定后面的重复请求均为无效请求。
3. 把请求从组件中抽离出来放到父级的业务页面中,再以props的方式传进组件。
核心思想
这个方案是什么都可以使用的,无论是使用axiOS、jq、fetch、小程序request。这里就写实现的原理,使用时直接把对应的代码放到对应的请求时机即可。
代码示例
let handleList = [] // 请求列表
const httpRequest = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(`请求成功,时间戳为:${new Date().getTime()}`)
}, 1000)
})
}
function requestTest(url, requestObj = {}) {
// 因为入参一般不会涉及到复杂类型,JSON.stringify进行序列化对比其实够用了
// 有个局限性就是入参的顺序改变了就会影响判断,不过这种特殊的改变一般在重复请求中不会出现
// 实在是有这种需求的,换成其他递归对比的api,lodash也有类似的api
const sameHandle = handleList.find(
(item) => item.url === url && jsON.stringify(item.requestObj) === JSON.stringify(requestObj)
)
if (sameHandle) {
// 遇到相同请求直接返回之前请求的promise
console.log(`存在重复请求,直接返回`)
return sameHandle.handle
}
const handle = new Promise((resolve, reject) => {
httpRequest()
.then((res) => {
resolve(res)
})
.catch((err) => {
reject(err)
})
.finally(() => {
// 无论请求结果如果,都需要把对应的请求移除掉
handleList = handleList.filter(
(item) =>
item.url !== url && JSON.stringify(item.requestObj) !== JSON.stringify(requestObj)
)
})
})
handleList.push({ url, requestObj, handle })
return handle
}
// *******************************我是华丽的分割线 开始使用*******************************
const params = {
name: 'waldon'
}
requestTest('/ajax/sameUrl', params).then((res) => {
console.log(`首次请求结果`, res)
console.log(`handleList:`, handleList)
})
requestTest('/ajax/sameUrl', params).then((res) => {
console.log(`重复请求结果`, res)
console.log(`handleList:`, handleList) // 请求列表中始终只有一个请求
setTimeout(() => {
console.log(`请求完成后的handleList:`, handleList) // 请求完成handleList对应的请求会被清除
}, 100)
})
setTimeout(() => {
// 特意延迟500ms请求,因为我们设置了接口1s才返回,所以应该得到一样的结果
requestTest('/ajax/sameUrl', params).then((res) => {
console.log(`重复请求结果`, res)
console.log(`handleList:`, handleList)
})
}, 500)
输出结果
存在重复请求,直接返回
存在重复请求,直接返回
首次请求结果 请求成功,时间戳为:1621650375540
handleList: [
{
url: '/ajax/sameUrl',
requestObj: { name: 'waldon' },
handle: Promise { '请求成功,时间戳为:1621650375540' }
}
]
重复请求结果 请求成功,时间戳为:1621650375540
handleList: [
{
url: '/ajax/sameUrl',
requestObj: { name: 'waldon' },
handle: Promise { '请求成功,时间戳为:1621650375540' }
}
]
重复请求结果 请求成功,时间戳为:1621650375540
handleList: [
{
url: '/ajax/sameUrl',
requestObj: { name: 'waldon' },
handle: Promise { '请求成功,时间戳为:1621650375540' }
}
]
请求完成后的handleList: []
代码地址 codepen
https://codepen.io/waldonUB/pen/ZEeeONM
注意的点
到此这篇关于javascript使用promise处理多重复请求的文章就介绍到这了,更多相关js promise多重复请求内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JavaScript使用promise处理多重复请求
本文链接: https://www.lsjlt.com/news/126828.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0