取消请求 Cancellation

Axios API 取消请求的使用方法与功能介绍

AbortController

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

const controller = new AbortController()

axios.get('/foo/bar', {
  signal: controller.signal
}).then((response) => {
  // ...
})
// 取消请求
controller.abort()

CancelToken `deprecated`

您还可以使用 cancel token 取消一个请求。

Axios 的 cancel token API 是基于被撤销 cancelable promises proposal。

此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用。

可以使用 CancelToken.source 工厂方法创建一个 cancel token ，如下所示：

const CancelToken = axios.CancelToken
const source = CancelToken.source()

axios.get('/user/12345', {
  cancelToken: source.token
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message)
  }
  else {
    // 处理错误
  }
})

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.')

也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken
let cancel

axios.get('/user/12345', {
  cancelToken: new CancelToken((c) => {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c
  })
})

// 取消请求
cancel()

注意: 可以使用同一个 cancel token 或 signal 取消多个请求。

在过渡期间，您可以使用这两种取消 API，即使是针对同一个请求：

const controller = new AbortController()

const CancelToken = axios.CancelToken
const source = CancelToken.source()

axios.get('/user/12345', {
  cancelToken: source.token,
  signal: controller.signal
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message)
  }
  else {
    // 处理错误
  }
})

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求 (message 参数是可选的)
source.cancel('Operation canceled by the user.')
// 或
controller.abort() // 不支持 message 参数

AbortController

CancelToken deprecated

CancelToken `deprecated`