如何在 Promise 中实现取消机制
Promise 是 JavaScript 中的一种异步编程解决方案，它可以帮助我们更好地处理异步代码，避免回调地狱的问题。但是在某些情况下，我们需要实现 Promise 的取消机制，即在 Promise 执行过程中，能够根据需要随时中断 Promise 的执行。本文将详细介绍如何在 Promise 中实现取消机制，并提供示例代码以供学习参考。
一、为什么需要取消机制
在实际项目中，我们经常会遇到需要取消 Promise 执行的场景。例如，在页面上搜索框中输入关键词后，我们需要向后端请求数据并展示在页面上。但是，如果用户在输入关键词的过程中频繁地修改，可能会导致前一次请求还没完成就发起了新的请求，这样会浪费服务器资源并且可能导致数据展示混乱。此时，我们需要实现 Promise 的取消机制，能够在用户重新输入关键词时中断前一次请求。
二、实现取消机制的方法
在实现 Promise 的取消机制时，我们需要考虑以下几个方面：
- 如何中断 Promise 的执行
- 如何处理已经执行完的 Promise
- 如何避免内存泄漏
在 ES6 中，Promise 实例提供了一个 cancel 方法，可以用来取消 Promise 的执行。具体实现方法如下：
// javascriptcn.com 代码示例
class CancelablePromise extends Promise {
constructor(executor) {
super(executor);
this.cancelable = true;
this.cancel = () => {
if (this.cancelable) {
this.cancelable = false;
this.reject(new Error('Promise canceled'));
}
};
}
}上述代码中，我们创建了一个 CancelablePromise 类，继承自 Promise 类。在构造函数中，我们为 CancelablePromise 实例添加了一个 cancelable 属性，用来标记当前 Promise 是否可以被取消。同时，我们还为 CancelablePromise 实例添加了一个 cancel 方法，用来取消 Promise 的执行。
当调用 cancel 方法时，我们首先判断当前 Promise 是否可以被取消。如果可以取消，我们将 cancelable 属性设置为 false，然后将 Promise 的状态设置为 rejected，并传递一个 Error 对象作为参数。这样，我们就成功地中断了 Promise 的执行。
但是，上述代码还存在一个问题，即已经执行完的 Promise 仍然会继续执行。为了处理这个问题，我们可以在 Promise 的执行函数中添加一个判断，如果 Promise 已经被取消，直接返回一个 rejected 的 Promise 对象。
// javascriptcn.com 代码示例
class CancelablePromise extends Promise {
constructor(executor) {
super(executor);
this.cancelable = true;
this.cancel = () => {
if (this.cancelable) {
this.cancelable = false;
this.reject(new Error('Promise canceled'));
}
};
}
}
function cancelable(fn) {
return (...args) => {
const promise = new CancelablePromise((resolve, reject) => {
const result = fn(...args);
if (result instanceof Promise) {
result.then(resolve).catch(reject);
} else {
resolve(result);
}
});
return promise.cancelable ? promise : Promise.reject(new Error('Promise already executed'));
};
}上述代码中，我们定义了一个 cancelable 函数，用来包装 Promise 的执行函数。在 cancelable 函数中，我们先创建一个 CancelablePromise 实例，并在 Promise 的执行函数中添加一个判断，如果 Promise 被取消，直接返回一个 rejected 的 Promise 对象。最后，我们将包装后的 Promise 返回。
三、示例代码
下面是一个简单的示例代码，用来演示如何在 Promise 中实现取消机制。
// javascriptcn.com 代码示例
function fetchData(keyword) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`Data for ${keyword}`);
}, 1000);
});
}
const cancelableFetchData = cancelable(fetchData);
let promise = cancelableFetchData('foo');
promise.then((data) => {
console.log(data);
}).catch((err) => {
console.log(err.message);
});
promise = cancelableFetchData('bar');
promise.then((data) => {
console.log(data);
}).catch((err) => {
console.log(err.message);
// Promise canceled
// 由于上一次请求还未完成，这次请求被取消了
});
promise.cancel();上述代码中，我们定义了一个 fetchData 函数，用来模拟向后端请求数据。然后，我们使用 cancelable 函数包装 fetchData 函数，并创建了一个 cancelableFetchData 函数。接着，我们分别使用 cancelableFetchData 函数发起两次请求，第一次请求完成后，第二次请求被取消。
四、总结
在实际项目中，实现 Promise 的取消机制是非常有用的。通过取消机制，我们可以更好地控制异步请求的执行，避免浪费服务器资源并提高用户体验。本文详细介绍了如何在 Promise 中实现取消机制，并提供了示例代码以供学习参考。但是，需要注意的是，在实现取消机制时，我们需要考虑到内存泄漏等问题，避免对系统造成不良影响。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65572206d2f5e1655d190d4e