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>



相关推荐
qczg_wxg4 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz5 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码6 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v6 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山6 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin6 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip6 小时前
结合Worker通知应用更新
前端·javascript
叶玳言7 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳7 小时前
HTML 基本结构
前端
Gazer_S7 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js