怎麼優雅的取消重複請求ajax
阿新 • • 發佈：2021-12-14
class CancelablePromise {
constructor() {
this.pendingPromise = null
this.reject = null
}
request(requestFn) { if (this.pendingPromise) { this.cancel('取消重複請求') }
const promise = new Promise((_, reject) => (this.reject = reject)) this.pendingPromise = Promise.race([requestFn(), promise]) return this.pendingPromise }
cancel(reason) { this.reject(reason) this.pendingPromise = null } }
function request(delay) { return () => new Promise(resolve => { setTimeout(() => { resolve('最後贏家是我') }, delay) }) } const cancelPromise = new CancelablePromise()
// 模擬頻繁請求5次 for (let i = 0; i < 5; i++) { cancelPromise .request(request(10)) .then((res) => console.log(res)) // 最後一個 最後贏家是我 .catch((err) => console.error(err)); // 前四個 取消重複請求 }
request(requestFn) { if (this.pendingPromise) { this.cancel('取消重複請求') }
const promise = new Promise((_, reject) => (this.reject = reject)) this.pendingPromise = Promise.race([requestFn(), promise]) return this.pendingPromise }
cancel(reason) { this.reject(reason) this.pendingPromise = null } }
function request(delay) { return () => new Promise(resolve => { setTimeout(() => { resolve('最後贏家是我') }, delay) }) } const cancelPromise = new CancelablePromise()
// 模擬頻繁請求5次 for (let i = 0; i < 5; i++) { cancelPromise .request(request(10)) .then((res) => console.log(res)) // 最後一個 最後贏家是我 .catch((err) => console.error(err)); // 前四個 取消重複請求 }