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请求')