axios请求的取消

axios请求的取消

解决:axios请求的取消

在使用 Axios 发起请求时,有时候你可能需要取消这些请求,比如当组件销毁时或者用户操作导致不再需要获取之前发起的请求结果。Axios 支持通过 Cancel Token 取消请求。

以下是使用 Axios 的 CancelToken 来取消请求的基本步骤:

创建 Cancel Token:

首先你需要创建一个取消令牌(Cancel Token)。从 Axios 0.18.0 版本开始,推荐的方式是使用 axios.CancelToken.source() 工厂函数来创建一个包含 token 和 cancel 方法的对象。

javascript 复制代码
const source = axios.CancelToken.source();

配置请求使用 Cancel Token:

在发起请求时,将上面创建的 token 传递给请求配置中的 cancelToken 字段。

javascript 复制代码
axios.get('/user/12345', {
  cancelToken: source.token
})
.then(function(response) {
  // 处理成功情况
})
.catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误情况
  }
});

取消请求:

如果你想取消发起的请求,只需调用 source.cancel() 方法,并可以传入一个可选的取消原因作为参数。

javascript 复制代码
source.cancel('用户取消了请求');

在 Vue 组件中管理取消逻辑(例如,在组件销毁前取消请求):

javascript 复制代码
export default {
  data() {
    return {
      cancelSource: null,
    };
  },
  methods: {
    fetchData() {
      this.cancelSource = axios.CancelToken.source();

      axios.get('/someEndpoint', {
        cancelToken: this.cancelSource.token
      })
      .then(response => {
        // 处理响应数据
      })
      .catch(error => {
        if (axios.isCancel(error)) {
          console.log('Request canceled');
        } else {
          // 处理其他错误
        }
      });
    }
  },
  beforeDestroy() {
    if (this.cancelSource) {
      this.cancelSource.cancel('Component destroyed, request canceled.');
    }
  }
}

以上是在Vue 2 中使用 Axios 取消请求的方法。记得合理管理你的取消令牌,避免内存泄漏或其他潜在问题。

最后附上示例

  • 示例:在输入框里输入1234,会发送4次请求,但只会保留1个请求,其余的请求会被取消

接口处添加cancelToken

javascript 复制代码
export function getERPInfoByDeviceCode(data, cancelToken) {
  return request({
    url: '/v1/dfs/deviceInfo/getERPInfoByDeviceCode',
    method: 'post',
    params: data,
    cancelToken, // 添加取消令牌
  })
}

使用取消请求

javascript 复制代码
// 此处template代码为输入框绑定input事件给getERPInfoByDeviceCodeData()方法即可
<script>
import { getERPInfoByDeviceCode } from '@/api/standard/device-base-api'
import axios from 'axios'
export default {
  data() {
    return {
      cancelToken: null, // 保存取消令牌的引用
    }
  },
  methods: {
    async getERPInfoByDeviceCodeData() {
      // 如果存在之前的请求,取消它
      if (this.cancelToken) {
        this.cancelToken.cancel('用户取消了请求')
      }
      // 创建新的取消令牌
      const cancelTokenSource = axios.CancelToken.source()
      this.cancelToken = cancelTokenSource
      try {
        const params = {}
        // 请求接口传入cancelTokenSource.token配置
        await getERPInfoByDeviceCode(params, cancelTokenSource.token)
      } catch (error) {
        if (axios.isCancel(error)) {
          console.log('Request canceled:', error.message)
        } else {
          // 处理其他错误
          console.error('Error fetching info:', error)
        }
      }
    },
  },
}
</script>



相关推荐
Nan_Shu_6145 分钟前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店15 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
计算机学姐23 分钟前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
蓝莓味的口香糖25 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒25 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser27 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan30 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family32 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_1 小时前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend1 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome