axios.CancelToken取消当前接口调用。

最新推荐文章于 2025-03-15 21:09:02 发布

Mingchen Shao

最新推荐文章于 2025-03-15 21:09:02 发布

阅读量1k

点赞数 2

分类专栏：工具的使用文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/shaoxxxxx/article/details/109801964

版权

工具的使用专栏收录该内容

7 篇文章

订阅专栏

博客介绍了在Vue项目中的操作，首先在main.js里挂载全局变量，接着封装POST方法，提到new CancelToken中的C是取消接口调用的方法，通过循环数组里的方法可停掉所有POST请求，还指出可在公共方法类中进行封装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先挂载在全局一个变量，在main.js中

取消axios请求的操作，存放所有cancel函数
 Vue.$httpRequestList = [];

2.其次就是在封装POST方法。


const CancelToken = axios.CancelToken;

//通用方法
/**
 * 
 * @param {*} url 
 * @param {*} params 
 * @param {*} fun 终止方法
 */
export const POST = (url, params) => {
  const getTimestamp = new Date().getTime();
  return instance.post(`${base}${url}?timer=${getTimestamp}`,params,{
    cancelToken: new CancelToken(c => {
      // 调用c就可以取消此请求
      Vue.$httpRequestList.push(c)
    })
  }).then(res => res.data).catch(err=>err)
}

new CancelToken中的C是每次调用接口取消的方法。当我们去循环执行数组里面的方法，就能停掉当前所有的POST请求

3.可以在公共方法类中封装

export const clearHttpRequestingList = () => {
  if (Vue.$httpRequestList.length > 0) {
    Vue.$httpRequestList.forEach((item) => {
      item();  // 执行
    })
    Vue.$httpRequestList = []
  }
}