這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 在前端中，JavaScript（JS）可以使用XMLHttpRequest對象或fetch API來發起網路請求。然而，JavaScript本身並沒有提供直接的方法來暫停請求的執行。一旦請求被髮送，它會繼續執行並等待響應。 儘管如此，你可 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
在前端中，JavaScript（JS）可以使用XMLHttpRequest對象或fetch API來發起網路請求。然而，JavaScript本身並沒有提供直接的方法來暫停請求的執行。一旦請求被髮送，它會繼續執行並等待響應。
儘管如此，你可以通過一些技巧或庫來模擬請求的暫停和繼續執行。下麵是一種常見的方法：
1. 使用XMLHttpRequest對象
你可以在發送請求前創建一個XMLHttpRequest對象，並將其保存在變數中。然後，在需要暫停請求時，調用該對象的abort()方法來中止請求。當需要繼續執行請求時，可以重新創建一個新的XMLHttpRequest對象併發起請求。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api', true);
xhr.send();
// 暫停請求
xhr.abort();
// 繼續請求
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api', true);
xhr.send();
2. 使用fetch API和AbortController
fetch API與AbortController一起使用可以更方便地控制請求的暫停和繼續執行。AbortController提供了一個abort()方法，可以用於中止fetch請求。
var controller = new AbortController();
fetch('https://example.com/api', { signal: controller.signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// 暫停請求
controller.abort();
// 繼續請求
controller = new AbortController();
fetch('https://example.com/api', { signal: controller.signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
請註意，這些方法實際上是通過中止請求並重新發起新的請求來模擬暫停和繼續執行的效果，並不能真正暫停正在進行的請求。
3. 曲線救國
模擬一個假暫停的功能，在前端的業務場景上，需要對這些數據進行處理之後渲染在界面上，如果我們能在請求發起之前增加一個控制器，在請求回來時，如果控制器為暫停狀態則不處理數據，等待控制器恢復後再進行處理，也可以達到暫停的效果。
// 創建一個暫停控制器 Promise
function createPauseControllerPromise() {
const result = {
isPause: false, // 標記控制器是否處於暫停狀態
resolveWhenResume: false, // 表示在恢復時是否解析 Promise
resolve(value) {}, // 解析 Promise 的占位函數
pause() { // 暫停控制器的函數
this.isPause = true;
},
resume() { // 恢復控制器的函數
if (!this.isPause) return;
this.isPause = false;
if (this.resolveWhenResume) {
this.resolve();
}
},
promise: Promise.resolve(), // 初始為已解決狀態的 Promise
};
const promise = new Promise((res) => {
result.resolve = res; // 將解析函數與 Promise 關聯
});
result.promise = promise; // 更新控制器中的 Promise 對象
return result; // 返回控制器對象
}
function requestWithPauseControl(request) {
const controller = createPauseControllerPromise(); // 創建暫停控制器對象
const controlRequest = request() // 執行請求函數
.then((data) => { // 請求成功回調
if (!controller.isPause) controller.resolve(); // 如果控制器未暫停，則解析 Promise
return data; // 返回請求結果
})
.finally(() => {
controller.resolveWhenResume = true; // 標記在恢復時解析 Promise
});
const result = Promise.all([controlRequest, controller.promise]).then(
(data) => {
controller.resolve(); // 解析控制器的 Promise
return data[0]; // 返回請求處理結果
}
);
result.pause = controller.pause.bind(controller); // 將暫停函數綁定到結果 Promise 對象
result.resume = controller.resume.bind(controller); // 將恢復函數綁定到結果 Promise 對象
return result; // 返回添加了暫停控制功能的結果 Promise 對象
}
為什麼需要創建兩個promise
在requestWithPauseControl函數中，需要等待兩個Promise對象解析：一個是請求處理的Promise，另一個是控制器的Promise。通過使用Promise.all方法，可以將這兩個Promise對象組合成一個新的Promise，該新的Promise會在兩個原始Promise都解析後才會解析。這樣做的目的是確保在處理請求結果之前，暫停控制器的resolve方法被調用，以便在恢復時解析Promise。
因此，將請求處理的Promise和控制器的Promise放入一個Promise數組，並使用Promise.all等待它們都解析完成，可以確保在兩個Promise都解析後再進行下一步操作，以實現預期的功能。
使用
const result = requestWithPauseControl(/*request fn*/).then((data) => {
console.log(data)
})
if (Math.random() > 0.5) { result.pause() }
setTimeout(() => {
result.resume()
}, 4000)
本文轉載於:
https://juejin.cn/post/7310786521082560562
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
