vue路由跳转取消上个页面的请求

为什么会使用

1. 当一个页面的请求过长时，然后点击链接跳转到新的页面，会导致不必要的资源浪费，如果上一个接口出现报错情况，会误导用户导致体验感不好。

怎么使用

1. 在axios设置

import axios from 'axios'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建一个 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // 跨域请求时发送Cookie
  timeout: 20000 // 请求超时10s
})
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么

    // if (store.getters.token) {
    // // 让每个请求携带令牌
    //  config.headers['token'] = getToken()
    // }
    config.cancelToken = new axios.CancelToken(cancel => {
      store.commit('addCancelToken', cancel)
    })
    return config
  },
  error => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
 /**
   * 通过自定义代码确定请求状态
   */
  response => {},
  error => {
	if (!axios.isCancel(error)) {
   	// 处理错误
   }
 }
)

2. 在Vuex设置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  cancelTokenArr: []
}

const mutations = {
  addCancelToken(state, cancel) {
    state.cancelTokenArr.push(cancel)
  },
  clearCancelToken(state) {
    state.cancelTokenArr.forEach(c => {
      c()
    })
    state.cancelTokenArr = []
  }
}

const store = new Vuex.Store({
  state,
  mutations
})

export default store

3. 路由跳转设置

router.beforeEach((to, from, next) => {
 store.commit('clearCancelToken')
 next()
})