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

　　咱们常常会遇到当前页面未加载完毕时跳转路由或者返回操做, 可是经过network会发现, 若网络环境较差的状况下, 会一直pending, 切换路由后在network中添加新的请求可是正在pending的请求依然存在. 当咱们在项目中作了一个上拉加载分页的时候会一直加载中, 用户等待不耐烦后可能会主动触发返回操做, 可是此刻即便用户触发返回操做, 加载分页的请求仍是存在, 页面仍是会一直提示加载中, 直到该请求加载成功或超时才肯罢休。最终给用户形成一些没必要要的结果，同时也对web性能形成必定的影响。

　　那么如何解决这个问题呢，方法就是监听路由，在路由切换前将上个页面的请求取消。

　　第一步：

　　axios请求头设置　　

import axios from 'axios'
import { store } from './store'    // 引入vuex

axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(function (cancel) {
      store.commit('pushToken', {cancelToken: cancel})
    })
    return config
  }
)

　　第二步：

　　利用vuex，新建一个store.js，将取消方法cancel放到数组中，而后在路由守卫中把数组中存有的cancel方法都执行

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ state: { cancelTokenArr: [] // 取消请求token数组
 }, mutations: { pushToken (state, payload) { state.cancelTokenArr.push(payload.cancelToken) }, clearToken ({ cancelTokenArr }) { cancelTokenArr.forEach(item => { item('路由跳转取消请求') }) cancelTokenArr = [] } } })

　　第三步：

　　监听路由　　

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

　　到此就能够解决路由跳转后上个页面的请求还在pending的状态啦

　　

　　

　　若是有问题，能够联系我：

　　QQ：412606846（微信同号）