axios 路由跳轉取消請求

1.store:

（1）state：

const state = {
  axiosCancelTokens: [] // axios取消請求的token集合
}

（2）mutation-types：

export const AXIOS_PUSH_TOKEN = 'AXIOS_PUSH_TOKEN' // 添加新的axios請求
export const AXIOS_CLEAR_TOKEN = 'AXIOS_CLEAR_TOKEN' // 清楚axios請求

（3）mutations：

import * as types from './mutation-types'
import { constAxios } from '@/utils/constant'

export default {
  [types.AXIOS_PUSH_TOKEN]: (state, src) => {
    state.axiosCancelTokens.push(src.cancelToken)
  },
  [types.AXIOS_CLEAR_TOKEN]: ({axiosCancelTokens}) => {
    axiosCancelTokens.forEach(item => {
      item(constAxios.requestCancelDesc)
    })
    axiosCancelTokens = []
  }
}

2.router:

import store from '@/store'
import * as types from '@/store/mutation-types'

// 導航守衛
router.beforeEach((to, from, next) => {
  store.commit(types.AXIOS_CLEAR_TOKEN)// 取消請求
  next()
})

3.axios:

/**
 * @file request.js axios配置
 */

import axios from 'axios'
import { MessageBox, Indicator, Toast } from 'mint-ui'
import { getStore, loginOut } from '../utils/index'
import store from '@/store'
import * as types from '@/store/mutation-types'
import { constAxios } from '@/utils/constant'

// 創建axios實例
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? '' : process.env.BASE_API,
  timeout: constAxios.timeout // 請求超時時間
})

axios.defaults.headers.post['Content-Type'] = 'application/json-patch+json'
axios.defaults.retry = 3
axios.defaults.retryDelay = 1000

// 添加請求攔截器
service.interceptors.request.use((config) => {
  // 添加請求
  config.cancelToken = new axios.CancelToken((cancel) => {
    store.commit(types.AXIOS_PUSH_TOKEN, {
      cancelToken: cancel
    })
  })
  // ...
  return config
}, (error) => {
  return Promise.reject(error)
})

service.interceptors.response.use(response => {
  // 對響應數據做些事
  // 1.關閉加載提示框
  Indicator.close()
  // 2.判斷接口訪問成功與否
  var result = response.data
  if (response.status !== 200) {
    MessageBox('提示', '接口訪問失敗，失敗狀態：' + response.status)
    return Promise.reject(response.status)
  } else if (!result.success) {
    var msg = result.msg
    MessageBox('提示', msg)
    return Promise.reject(msg)
  } else {
    return result
  }
}, (error) => {
  // 請求錯誤時做些事
  // 關閉加載提示框
  Indicator.close()
  // 判斷是否是因爲路由跳轉取消請求
  if (error.message !== constAxios.requestCancelDesc) {
    // 判斷是否是請求超時
    var originalRequest = error.config
    if (error.code === 'ECONNABORTED' && error.message.includes('timeout') && !originalRequest._retry) {
      var config = error.config
      MessageBox.alert('網絡好像不太給力，請稍後再試').then(action => {
        originalRequest._retry = true
        return service.request(config)
      })
    } else if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
      Toast({
        message: `請求超時！`,
        position: 'bottom'
      })
    } else if (error.response) {
      if (error.response.status === 401) {
        // MessageBox.alert('抱歉，您沒有此操作權限！').then(action => {
        //   // loginOut()
        // })
      } else {
        MessageBox('提示', `接口訪問失敗：${error.message}(${error.response.status})`)
      }
    } else {
      MessageBox('提示', '接口訪問失敗，' + error.message)
    }
  }
  return Promise.reject(error)
})

export default service

4.constant:常量

/**
 * 常量集合
 */

/**
 * axios取消請求的描述
 */
export const AXIOS_REQUEST_CANCEL = '取消請求'

5.參考：

（1）axios npm：https://www.npmjs.com/package/axios
（2）路由跳轉取消請求：https://blog.csdn.net/echo_Ae/article/details/89174777