vue处理tabs切换时请求数据不对的应对方法

vuex

// 需要处理的请求路径
const whiteUrl = ['/api/url']

const cancelAxios = {
  state: {
    cancelAxiosArr: [] // 取消请求token数组
  },
  mutations: {
    pushAxios(state, payload) {
      state.cancelAxiosArr.push(payload)
    },
    clearAxios(state) {
      state.cancelAxiosArr.forEach((item) => {
        item.cancel('取消请求')
      })
      state.cancelAxiosArr = []
    },
    clearCurRequest(state, config) {
      for (let i = state.cancelAxiosArr.length - 1; i >= 0; i--) {
        const item = state.cancelAxiosArr[i]
        if (config && whiteUrl.indexOf(config.url) !== -1 && item.urlPath === config.url) {
          item.cancel('取消请求')
          state.cancelAxiosArr.splice(i, 1)
        }
      }
    }
  }
}

export default cancelAxios

封装好的请求

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'

import vuexstore from '@/store'

// 路由切换
import router from '@/router'
router.beforeEach((to, from, next) => {
  vuexstore.commit('clearAxios')
  next()
})

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 30000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
      // 处理待办、已办、办结
      vuexstore.commit('clearCurRequest', config)
      config.cancelToken = new axios.CancelToken(res => {
        vuexstore.commit('pushAxios', { 'urlPath': config.url, 'cancel': res })
      })
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  async response => {
      return response
  },
  error => {
    if (axios.isCancel(error)) {
      return Promise.reject()
    }
    if (error.toString().includes('401')) {
      MessageBox.confirm(
        '你已被登出，可以取消继续留在该页面，或者重新登录',
        '确定登出',
        {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
      })
      return Promise.reject(new Error('error'))
    } else if (error.toString().includes('404')) {
      Message.error('该服务未启动或服务不存在')
    } else if (error.toString().includes('500')) {
      Message.error('服务器错误，请联系管理员')
    } else if (error.response.data && error.response.data.msg) {
      Message.error(error.response.data.msg)
    } else {
      console.error(error.message)
    }
    return Promise.reject(error)
  }
)
export default service