axios拦截器里终止请求

1、首先我们用一个值用来保存axios的终止函数，放在vuex里，方便全局调用。

const state = {
    cancelAxios: null // 终止axios请求
}
const mutations = {
    setCancelAxios(state, n) {
        state.cancelAxios = n
    }
}
const actions = {
    setCancelAxios({ commit }, n) {
        commit('setCancelAxios', n)
    }
}
export default {
    state,
    mutations,
    actions
}

2、在axios的请求拦截器里。

// 创建axios 实例
var service = axios.create({ timeout: 10000 })

// 请求拦截器:
service.interceptors.request.use(
  config => {
    // 设置cancelToken对象
    config.cancelToken = new axios.CancelToken(function (c) {
      // 将c保存在vuex的cancelAxios中
      store.dispatch('setCancelAxios', c)
    })
    return config
  },
  error => Promise.reject(error)
)

3、页面中终止请求。

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