vue路由跳转取消请求

路由跳转时，上一个路由里的请求应被取消

axios请求头设置

axios.interceptors.request.use(

      config => {

            config.cancelToken = new CancelToken(function(cancel){

                   store.commit('pushToken', {

                          cancelToken: cancel
                  })
             }

             .....
      }
)

router/index.js

router.beforeEach((to, from, next) => {
      
       store.commit('clearToken'); // 取消请求
       
        ....
})

store.js

//state
cancelTokenArr: [], // 取消请求token数组

//mutation
pushToken(state, payload){

     state.cancelTokenArr.push(payload.cancelToken);
},

clearToken({cancelTokenArr}){

     cancelTokenArr.forEach(item => {
            
           item('路由跳转取消请求');
     });

     cancelTokenArr = [];
}

• 将取消方法cancel放到数组中，然后在路由守卫中把数组中存有的cancel方法都执行

• 参考
  vue axios请求 取消上一个页面所有请求 批量取消请求

• other
  使用axiso进行post传参时，有一种方法是将数据使用qs.stringify(postDate)转一下，其实它是将其转成了字符串，图中第一行数据

07779deb90d54bd1e7f187f4c4e3a4a.png 2fcc5c210afa0a0fb9c554cb3f29979.png