请求解析createCancelToken函数工作原理，重点说明token.promise及取消函数

嘿，我来帮你把这个createCancelToken函数拆解得明明白白，重点解决你困惑的token.promise和取消函数部分！这个函数本质是个轻量的手动触发式Promise工具，专门用来实现异步操作的取消逻辑（比如中断API请求、终止耗时异步任务），咱们一步步来看：

1. 先看初始化的核心变量 #

const token = {}
let cancel

• token是个空对象，后续会挂载两个关键属性：promise（用来监听取消事件）和reason（用来同步判断是否已取消）。
• cancel是提前声明的变量，用来后面存取消函数——因为这个函数需要在Promise外部被调用，所以先占个位置。

2. token.promise：一个等着被手动“唤醒”的Promise #

这部分是你最困惑的核心，咱们仔细看：

token.promise = new Promise(resolve => {
  cancel = reason => {
    token.reason = reason
    resolve(reason)
  }
})

• 这里创建了一个一直处于pending（等待）状态的Promise，它的resolve函数没有被立即调用，而是被“存”在了cancel变量里。也就是说，这个Promise不会自己完成，必须通过调用cancel函数才能触发它的resolve。
• token.promise的作用是让外部代码可以异步监听取消事件——比如你可以写token.promise.then(reason => { /* 取消后要做的事，比如清理资源 */ })，当cancel被调用时，这个then回调就会立刻执行。

3. cancel函数：手动触发Promise的状态变更 #

cancel函数的逻辑其实很直白：

• 它接受一个reason参数（用来标记取消的原因，比如"用户主动取消"、"请求超时"）。
• 第一步把reason挂到token对象上：这样外部代码可以同步检查token.reason是否存在，不用等Promise的回调，就能快速判断是否已经触发了取消。
• 第二步调用resolve(reason)：把之前处于pending状态的token.promise变成fulfilled（已完成）状态，触发所有监听这个Promise的回调函数。

4. 实际用起来是什么样？举个例子 #

为了让你更有体感，咱们拿取消API请求的场景举例：

// 创建取消令牌和取消函数
const [cancelToken, cancelRequest] = createCancelToken()

// 发起请求，同时监听取消信号
const fetchData = async () => {
  try {
    const res = await fetch('/api/get-data')
    const data = await res.json()
    console.log('请求成功：', data)
  } catch (err) {
    // 同步检查是否是取消导致的错误
    if (cancelToken.reason) {
      console.log('请求被取消了：', cancelToken.reason)
    } else {
      console.log('请求出错：', err)
    }
  }
}

fetchData()

// 同时用token.promise监听取消事件
cancelToken.promise.then(reason => {
  console.log('异步收到取消通知：', reason)
})

// 3秒后主动取消请求
setTimeout(() => {
  cancelRequest('用户点击了取消按钮')
}, 3000)

最后梳理一遍完整流程 #

1. 调用createCancelToken()，拿到token对象和cancel函数。
2. token.promise处于pending状态，静静等待被resolve。
3. 当你需要取消操作时，调用cancel(reason)：
   • token.reason被赋值，外部可以同步判断取消状态。
   • token.promise被resolve，所有监听它的then回调开始执行。
4. 外部代码通过token.reason（同步快速检查）或者token.promise（异步监听处理）来响应取消事件。

内容的提问来源于stack exchange，提问作者Rasim Avcı