如何在 JavaScript 中取消Promises？
作者：佚名
JavaScript 中的 Promises 是管理異步操作的天賜之物，它提供了一種處理成功和失敗的簡潔方法。
JavaScript 中的 Promises 是管理異步操作的天賜之物，它提供了一種處理成功和失敗的簡潔方法。
但有一個微妙的挑戰：從設計上講，Promises 擁抱了其異步性質，一旦啟動就無法直接停止。
在我們需要更精細控制的情況下，這可能會成為障礙，這時，我們就需要設計可取消的 Promises！
原始 Promise 的問題
想象一下獲取大文件或發出網絡請求。如果用戶決定在中途取消，該怎么辦？使用標準 Promise，會陷入困境。它會在后臺繼續運行，可能會浪費資源。
我們的目標：優雅取消
我們希望為我們的 Promise 提供以下功能：
- 取消：發起取消請求。
- 指示狀態：了解 Promise 是否已成功取消或已解決。
TaskCancelable 解決方案
以下是我們可以實現 TaskCancelable 函數來增強我們的 Promise 的方法：
export const TaskCancelable = (task) => {
let _reject;
let isCancel = false;
const _status = Symbol("cancel");
const cancelP = new Promise((resolve, reject) => {
_reject = reject;
});
const p = Promise.race([task, cancelP]);
p.catch((reason) => {
if (reason === _status) {
isCancel = true;
}
});
p.cancel = () => {
_reject(_status);
return p;
};
p.isCancel = () => {
return isCancel;
};
return p;
};解釋
Symbol("cancel")：我們使用 Symbol 來創建取消的唯一標識符。這可以防止與其他潛在錯誤發生沖突。
Promise.race([task, cancelP])：奇跡就在這里發生！我們將原始任務 Promise 與 cancelP Promise 進行比賽。先解決或先拒絕的一方獲勝。
p.cancel()：此自定義函數在調用時會拒絕 cancelP Promise，從而有效觸發取消。
p.isCancel()：這個方便的方法讓我們可以檢查 Promise 是否確實被取消。
實際示例
讓我們看看如何使用 TaskCancelable：
// Simulate a long-running task
const longTask = new Promise((resolve) => {
setTimeout(() => {
resolve("Task complete!");
}, 3000);
});
const cancellableTask = TaskCancelable(longTask);
// Cancel after 1 second
setTimeout(() => {
cancellableTask.cancel();
}, 1000);
cancellableTask
.then((result) => console.log("Success:", result)) // Won't run
.catch(() => {
if (cancellableTask.isCancel()) {
console.log("Task was cancelled!");
} else {
console.log("Task failed for another reason");
}
});結論
通過創建可取消的 Promises，我們在管理異步操作方面獲得了更大的靈活性。這種模式對于響應式用戶界面和資源密集型任務至關重要，因為取消是這些任務的關鍵。
責任編輯：華軒
來源：
web前端開發
