如何取消ES6（香草JavaScript）承诺链

在ES6之前，异步编程是一个相当麻烦的任务。函数回调嵌套在一起，代码难以维护和理解。为了解决这个问题，ES6引入了Promise对象，它提供了一种优雅的方式来处理异步编程。

然而，有时候你可能会遇到需要取消Promise链的情况。比如，一个用户操作被撤销了，但是Promise链仍然在后台执行。这时候，如果不取消Promise链，程序就会浪费时间和资源。

下面将介绍如何取消Promise链。我们将从基础知识开始，逐步深入，帮助您理解和实现Promise链的取消功能。

基础知识

首先，让我们回顾一下Promise对象的基本知识。

Promise对象表示一个异步操作的最终状态（成功或失败），并且可以通过.then()方法注册回调函数来处理异步操作的结果。

例如：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(result);
  } else {
    reject(error);
  }
});

promise.then(result => {
  // 处理异步操作成功的结果
}).catch(error => {
  // 处理异步操作失败的结果
});

Promise链是通过.then()方法连接多个Promise对象的过程。每个.then()方法都会返回一个新的Promise对象，可以继续使用.then()方法连接下一个Promise对象。

例如：

const promise1 = new Promise((resolve, reject) => {
  // 异步操作
  resolve(result1);
});

promise1.then(result1 => {
  // 处理异步操作成功的结果
  return result2;
}).then(result2 => {
  // 处理result2
});

取消Promise链

为了取消Promise链，我们需要先创建一个包装器对象来封装原始Promise对象。这个包装器对象将有一个.cancel()方法，该方法将在需要时取消Promise链。

下面是一个简单的包装器对象示例：

class PromiseWrapper {
  constructor(promise) {
    this.promise = promise;
    this.isCanceled = false;
  }

  then(onFulfilled, onRejected) {
    if (this.isCanceled) {
      return this;
    }
    const nextPromise = this.promise.then(onFulfilled, onRejected);
    return new PromiseWrapper(nextPromise);
  }

  catch(onRejected) {
    if (this.isCanceled) {
      return this;
    }
    const nextPromise = this.promise.catch(onRejected);
    return new PromiseWrapper(nextPromise);
  }

  cancel() {
    this.isCanceled = true;
  }
}

在上面的代码中，PromiseWrapper类接收一个Promise对象，然后重写.then()和.catch()方法。如果包装器对象已经被取消，则不会执行回调函数并直接返回自身。

最后，我们可以使用PromiseWrapper对象来取消Promise链：

let promise = new Promise((resolve, reject) => {
  // 异步操作
});

let wrappedPromise = new PromiseWrapper(promise);

// 取消Promise链
wrappedPromise.cancel();

示例

下面是一个更实际的案例，它演示了如何使用Promise链取消员工列表的加载过程。

class EmployeeService {
  getAllEmployees() {
    return new Promise((resolve, reject) => {
      // 模拟异步请求
      setTimeout(() => {
        resolve(['Alice', 'Bob', 'Charlie']);
      }, 1000);
    });
  }
}

class EmployeeListViewModel {
  constructor() {
    this.employeeService = new EmployeeService();
    this.loadEmployees();
  }

  loadEmployees() {
    const promise = this.employeeService.getAllEmployees();

    const wrappedPromise = new PromiseWrapper(promise);

    wrappedPromise.then(employees => {
      this.render(employees);
    });
  }

  render(employees) {
    // 渲染员工列表
  }

  cancel() {
    // 取消Promise链
    this.wrappedPromise.cancel();

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/14535) ，转载请注明来源
本文地址：[https://www.javascriptcn.com/post/14535](https://www.javascriptcn.com/post/14535)