JavaScript 는 promise 를 사용 하여 중복 요청 을 처리 합 니 다.
중복 요청 을 처리 하 는 글 은 여러분 도 많이 보 셨 을 것 입 니 다.대부분 response 가 돌아 오기 전에 중복 요청 을 발견 하면 return 이 떨 어 지 는 것 과 절 류/떨 림 방지 로 사용자 의 빈번 한 조작 을 간접 적 으로 피 하 는 두 가지 버 전 으로 나 뉘 어 있 습 니 다.최근 에 사용 하 는 과정 에서 이 두 버 전 은 일부 장면 에서 한계 가 있 음 을 발견 했다.
2.문제 장면
그림 에서 보 듯 이 h5 페이지 의 상단 과 아래쪽 에 이 명함 구성 요 소 를 표시 해 야 합 니 다.이 명함 들 의 정 보 는 하나의 인 터 페 이 스 를 통 해 얻 을 수 있 습 니 다.이 구성 요소 가 현재 페이지 에서 초기 화 되면 두 번 반복 되 는 요청 이 발생 합 니 다.
이 럴 때 몇 가지 선택 에 직면 하 게 된다.
1.중복 요청 에 대해 어떠한 처리 도 하지 않 는 다.
핵심 사상
코드 예제
let handleList = [] //
/**
*
* @author waldon
* @date 2020/6/9
*/
const httpRequest = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(` ， ：${new Date().getTime()}`)
}, 1000)
})
}
/**
*
* @author waldon
* @date 2020/6/9
* @param {String} url -
* @param {Object} requestObj -
* @returns {Promise} - promise
*/
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
주의 점
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
