cancelToken 源码解析

深度解析 cancelToken 源码，助力你的任务高效管理

在现代应用程序开发中，及时取消正在运行的任务至关重要。cancelToken 应运而生，成为一个不可或缺的工具，帮助开发者优雅地实现任务取消。让我们深入源码，揭开 cancelToken 的工作原理，助力你更有效地管理任务。

什么是 cancelToken？

cancelToken 是一个 JavaScript 构造函数，它创建一个可被取消的 Promise 对象。这个 Promise 对象的 resolve 和 reject 函数被用来表示任务的完成或取消。

cancelToken 的使用场景

cancelToken 的使用场景十分广泛：

• 取消用户点击按钮后发起的请求。
• 终止执行时间过长的任务。
• 控制并行执行的任务顺序。

cancelToken 源码解析

cancelToken 的源码简洁明了，仅有几十行代码。

function CancelToken(executor) {
  if (typeof executor !== 'function') {
    throw new TypeError('executor must be a function.');
  }

  var resolvePromise;
  var rejectPromise;
  this.promise = new Promise(function(resolve, reject) {
    resolvePromise = resolve;
    rejectPromise = reject;
  });

  executor(function cancel() {
    resolvePromise();
  });
}

CancelToken.source = function() {
  var cancel;
  var token = new CancelToken(function executor(c) {
    cancel = c;
  });
  return {
    token: token,
    cancel: cancel
  };
};

构造函数

CancelToken 构造函数接收一个 executor 函数，该函数负责创建一个可取消的 Promise。executor 函数会立即执行，并接收一个 cancel 函数作为参数。当调用 cancel 函数时，可取消的 Promise 将被解析。

source 方法

source 方法返回一个包含 token 和 cancel 函数的对象。token 是可取消的 Promise，而 cancel 函数用于手动取消任务。

代码示例

const cancelToken = new CancelToken(function executor(cancel) {
  setTimeout(function() {
    // 执行任务...
    cancel();
  }, 1000);
});

cancelToken.promise.then(function onFulfilled() {
  // 任务已取消
});

cancelToken.promise.catch(function onRejected() {
  // 任务已取消
});

结论

cancelToken 是任务取消的利器，在应用程序开发中有着广泛的应用场景。通过理解其源码的工作原理，开发者可以充分利用 cancelToken 的功能，有效管理任务，提高代码的可维护性和用户体验。

常见问题解答

1. cancelToken 只能用于取消异步任务吗？
   答：不一定，它也可以用于取消同步任务，例如使用 setTimeout 设置的定时器。

2. 如果任务在取消前已经完成，cancelToken 会有什么影响？
   答：cancelToken 无影响，任务仍会继续执行并完成。

3. 如何确保任务在取消后不会执行任何操作？
   答：可以使用 try-catch 块来捕获取消异常，并阻止任务代码执行。

4. cancelToken 是否支持同时取消多个任务？
   答：是的，可以通过创建多个 cancelToken 实例来同时取消多个任务。

5. 在什么情况下应该使用 cancelToken？
   答：当需要在任务执行期间及时取消任务时，应使用 cancelToken。例如，当用户点击取消按钮或任务执行时间过长时。