当前位置: 代码迷 >> 综合 >> axios拦截器里终止请求
  详细解决方案

axios拦截器里终止请求

热度:25   发布时间:2024-02-19 16:06:48.0

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