Axios 取消请求

在 axios 调用时设置 timeout 属性可处理与响应相关的超时。

在某些情况下（例如，网络连接不可用），取消 Axios 调用可以更早地中断连接，提高性能。如果不使用取消操作，Axios 调用可能会一直挂起，直到父级代码/栈超时（在服务器端应用中可能需要几分钟）。

要终止 axios 的调用，你可以使用以下方法：

• signal
• cancelToken （已弃用）

结合超时和取消方法（例如 signal）应该涵盖与响应相关的超时和与连接相关的超时。

signal ：AbortController

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

const controller = new AbortController()

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

使用最新 AbortSignal.timeout() API [nodejs 17.3+] 的超时示例：

axios
  .get("/foo/bar", {
    signal: AbortSignal.timeout(5000) // 在 5 秒后中止请求
  })
  .then(function (response) {
    //...
  })

带有超时辅助函数的示例：

function newAbortSignal(timeoutMs) {
  const abortController = new AbortController()
  setTimeout(() => abortController.abort(), timeoutMs || 0)

  return abortController.signal
}

axios
  .get("/foo/bar", {
    signal: newAbortSignal(5000) // 在 5 秒后中止请求
  })
  .then(function (response) {
    //...
  })

CancelToken deprecated

你还可以使用 CancelToken 取消请求。

• 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(function (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(function executor(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(function (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 参数