上述代码里，我们将token声明为对象，并在第5行中给token添加一个promise属性，该属性是一个Promise实例，并且将Promise实例的resolve方法传递给了cancel变量，这样，当调用执行cancel()的时候，就是在执行resolve()，token的promise属性就能触发then回调函数。

这样，我们就实现了令牌中断请求的要求，并将cancel和token关联起来了。到这里，我们就明白每一次调用source方法生成的cancel和token为啥能一一对应了。

执行器模式原理

CancelToken不仅支持令牌中断模式，还支持执行器中断模式，而执行器模式是需要通过CancelToken的构造函数实现。

该构造函数的实现有三个细节需要注意：

1. 首先，该构造函数同样需要给实例对象挂载一个promise属性，该属性是一个Promise实例。这样才能支持在token.promise.then回调里执行取消操作。
2. 其次，需要接受一个执行器函数作为入参，
3. 最后，作为入参的执行器，它本身也有入参，它的入参是一个方法，在这个方法调用的时候，执行promise属性的resolve方法，这样才能触发toekn.promise.then回调。

带着上面三个细节，我们来尝试实现CancelToken构造函数：

function CancelToken(executor) {   let resolvePromise;   this.promise = new Promise((resolve) => { resolvePromise = resolve;});      executor(function c() {     resolvePromise();   }) } 

上述代码中，我们修改了第11行代码，给token赋值为CancelToken实例对象，并在实例化的时候传入一个执行器函数executor，该执行器函数接受一个参数c，并将c赋值给了外部变量cancel属性，这样，执行cancel的流程就变成下面这样：

1. 调用执行第15行返回的cancel()函数。
2. cancel函数来自于第11行中executor的入参c。
3. 第11行中的入参c来自于第5行执行executor时的赋值。
4. 最终，执行cancel()的时候，就会执行第6行中的resolvePromise()方法，从而改变promise属性的状态，触发then回调函数。

测试手写版CancelToken

接下来，使用我们实现的CancelToken来试试取消网络请求，

方式一：执行器模式示例如下：

<script>   function CancelToken(executor) {     let resolvePromise;     this.promise = new Promise((resolve) => {       resolvePromise = resolve;     });      executor(function c() {       resolvePromise();     });   }   CancelToken.source = function () {     let cancel;     const token = new CancelToken(function executor(c) {       cancel = c;     });     return {       cancel,       token,     };   };    function fetchData(url, options = {}) {     const { cancelToken } = options;      return new Promise((resolve, reject) => {       const xhr = new XMLHttpRequest();       xhr.open("GET", url);        // 监听请求状态变化，处理请求的常规逻辑       xhr.onreadystatechange = () => {         if (xhr.readyState === 4) {           if (xhr.status >= 200 && xhr.status < 300) {             resolve(xhr.responseText);           }         }       };        // 监听取消请求       if (cancelToken) {         cancelToken.promise.then((msg) => {           xhr.abort();           reject(`Request cancelled: ${msg}`);         });       }        xhr.send();     });   }    let cancel;    fetchData("https://jsonplaceholder.typicode.com/todos/1", {     cancelToken: new CancelToken((c) => {       cancel = c;     }),   }).catch((e) => {     console.log(e);   });    setTimeout(() => {     cancel("取消请求");   }, 500); </script>

执行结果同执行器模式，这里就不截图了。

优化

我们手写版的CancelToken已经实现了基本的功能，也就是取消请求，但是有个问题，那就是调用cancel("取消请求")里，参数没有传递到给cancelToken.promise.then回调函数，所以打印出来的结果里有个undefined。因此，我们需要稍微优化下CancelToken，补齐参数的传递。

优化的方式也很简单，取消函数cancel的入参，会通过形参赋值的方式传递给c的入参，因此我们只需要拿c的入参给resolve就行了。具体如下：

function CancelToken(executor) {   let resolvePromise;   this.promise = new Promise((resolve) => {     resolvePromise = resolve;   });    executor(function c(msg) {     resolvePromise(msg); // 这里将cancel的入参传递给resolve   }); }