在 Vue.js 中取消 Axios 请求：完整指南

2024-03-28 13:45:08

## 在 Vue.js 中取消 Axios 请求

导言

在现代 web 开发中，处理异步请求对于构建交互式且响应迅速的应用程序至关重要。Axios 库是 JavaScript 中一个流行的 HTTP 请求处理库，可以与 Vue.js 框架无缝集成。然而，在某些情况下，取消挂起的请求非常重要，例如当用户导航到不同页面或取消操作时。

本指南将介绍在 Axios 3 和 Axios 2 中取消 axios 请求的详细步骤，并提供在 Vue.js 应用程序中使用 axios 取消请求的具体示例。

## Axios 3：使用 CancelToken 取消请求

什么是 CancelToken？

CancelToken 是一种机制，它允许你创建一个可以用来取消请求的令牌。

如何使用 CancelToken？

创建 CancelToken 源：

const cancelTokenSource = axios.CancelToken.source();

将 CancelToken 传递给 axios 请求：

axios.get('/api/data', {
  cancelToken: cancelTokenSource.token
}).then(response => {
  // 请求成功
}).catch(error => {
  if (axios.isCancel(error)) {
    // 请求已取消
  } else {
    // 请求失败
  }
});

取消请求：

cancelTokenSource.cancel('Operation canceled by the user.');

## Axios 2：使用 cancelToken 取消请求

对于 Axios 2，取消请求的过程略有不同：

创建 cancel 令牌：

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

将 cancelToken 传递给 axios 请求：

axios.get('/api/data', {
  cancelToken: source.token
}).then(response => {
  // 请求成功
}).catch(error => {
  if (axios.isCancel(error)) {
    // 请求已取消
  } else {
    // 请求失败
  }
});

取消请求：

source.cancel('Operation canceled by the user.');

## 在 Vue.js 中使用 Axios 取消请求

在 Vue.js 应用程序中，你可以使用 axios 插件集成 axios。以下是使用 axios 和 CancelToken 取消 axios 请求的步骤：

安装 axios 和 vue-axios：

npm install axios vue-axios

在你的 Vue.js 应用程序中安装 vue-axios：

import Vue from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'

Vue.use(VueAxios, axios)

使用 axios：

export default {
  data() {
    return {
      cancelTokenSource: null
    }
  },
  methods: {
    async fetchData() {
      this.cancelTokenSource = axios.CancelToken.source()

      try {
        const response = await this.$axios.get('/api/data', {
          cancelToken: this.cancelTokenSource.token
        })

        // 请求成功
      } catch (error) {
        if (axios.isCancel(error)) {
          // 请求已取消
        } else {
          // 请求失败
        }
      }
    },
    cancelRequest() {
      this.cancelTokenSource.cancel('Operation canceled by the user.')
    }
  }
}