axios的cancel功能源码解读

本文梳理axios中使用CancelToken来实现中断请求的源码实现. (CancelToken已经是deprecated, axios已支持AbortController实现相应的功能)

简单使用

const CancelToken = axios.CancelToken
// 创建cancelToken
const source = CancelToken.source()

axios
  .get('/user/12345', {
    // 请求的时候 传入创建的cancelToken
    cancelToken: source.token,
  })
  .catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message)
    } else {
      // handle error
    }
  })
// 调用cancelToken的cancel方法 取消请求
source.cancel('Operation canceled by the user.')

上面是axios官网的上使用CancelToken的例子，可以看到通过将创建的cancelToken传入对应的请求对象，就实现了请求控制能力暴露给外部的能力。

源码分析

XMLHttpRequest支持使用abort方法实现请求的终止，axios底层封装了XMLHttpRequest来实现请求的处理，通过将调用abort方法的能力暴露给外部就实现了请求中断的控制。axios引入了cancelToken来实现这个过程的解耦。下面从具体的源码来看实现的过程

创建cancelToken对象

// 调用source方法 生成CancelToken 导出token和取消请求的cancel方法
CancelToken.source = function source() {
  var cancel
  var token = new CancelToken(function executor(c) {
    cancel = c
  })
  return {
    token: token,
    cancel: cancel,
  }
}

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

  var resolvePromise
  // 设置CancelToken的promise函数
  this.promise = new Promise(function promiseExecutor(resolve) {
    resolvePromise = resolve
  })

  var token = this
  // cancel函数的执行逻辑 在调用cancel接口的时候 执行下面的逻辑
  executor(function cancel(message) {
    if (token.reason) {
      // Cancellation has already been requested
      return
    }

    token.reason = new Cancel(message)
    resolvePromise(token.reason)
  })
}

cancelToken与XMLHttpRequest绑定

// 代码是axios封装XMLHttpRequest的部分逻辑
if (config.cancelToken) {
  // 如果传入的配置有cancelToken 就调用cancelToken的promise方法
  // 通过promise实现控制流的流转 调用cancelToken方法的时候 将resolve时机暴露给cancelToken
  // 调用cancelToken的cancel方法时,resolve了当前的promise，控制流程回到当前的后续流程，执行request.abort()从而完成请求的终止
  config.cancelToken.then(function onCanceled(cancel) {
    if (!request) {
      return
    }

    request.abort()
    reject(cancel)
    // Clean up request
    request = null
  })
}

if (!requestData) {
  requestData = null
}

// Send the request
request.send(requestData)

通过对实现流程的源码梳理，在类似的功能中可以利用promise来完成流程的控制。