axios取消全部请求和单个请求

Mr.WeI197

已于 2022-05-19 17:11:01 修改

阅读量1.8k

点赞数 1

文章标签： javascript linq 开发语言

于 2022-05-19 15:31:54 首次发布

本文链接：https://blog.csdn.net/weixin_55814597/article/details/124863947

版权

本文介绍了如何在Vue.js应用中利用axios库实现取消HTTP请求的功能。通过在axios实例中设置`cancelToken`，并将取消函数保存在vuex中，可以方便地在需要时终止请求。同时，详细展示了如何针对单个请求添加`cancelToken`并在调用时进行取消操作。这种方法有助于优化应用性能，避免不必要的网络请求。

摘要由CSDN通过智能技术生成

一、取消全部请求

1、创建axios实例时添加cancelToken方法

const request = axios.create({
  // API 请求的默认前缀
  baseURL: process.env.VUE_APP_BASE_API,
  cancelToken: new axios.CancelToken(function (c) {
    // 将c保存在vuex的cancelAxios中
    store.dispatch('setCancelAxios', c)
  })
  // timeout: 30000 // 请求超时时间
})

2、在vuex里面添加方法

state: {
    cancelAxios: null // 终止axios请求
  },
  mutations: {
    setCancelAxios (state, n) {
      state.cancelAxios = n
      console.log('111')
    }
  },
  actions: {
    setCancelAxios ({ commit }, n) {
      commit('setCancelAxios', n)
      console.log('22')
    }
  },

3、在页面使用，此时state里面cancelAxios是一个方法，调用该方法

this.$store.state.cancelAxios('请求终止了')

二、取消单个请求

1、在单个请求的接口里面添加 cancelToken属性

export function getArrearsCustomer (cancelToken) {
  return request({
    url:  '路径',
    method: 'post',
    cancelToken

  })
}

2、在调用时传递参数在需要终止的时候调用 this.CancelToken(）终止

     getArrearsCustomer(
            new axios.CancelToken((c) => {
                this.CancelToken = c
            })
        ).then((res) => {
          
            console.log('返回数据', res)
        })


        this.CancelToken('这一个请求终止了')