vue axios封装

import Vue from 'vue'
import axios from 'axios'
import {
  baseURL,
  contentType,
  debounce,
  invalidCode,//402报错
  noPermissionCode,//401报错
  requestTimeout,
  successCode,//【200或者0】的请求成功
  // tokenName,
} from '@/config' //请求参数设置
import store from '@/store'
import qs from 'qs' //是把一个参数对象格式化为一个字符串。
import router from '@/router'
import { isArray } from '@/utils/validate'

let loadingInstance

/**
 * @author https://vue-admin-beautiful.com （不想保留author可删除）
 * @description 处理code异常
 * @param {*} code
 * @param {*} msg
 */
//响应报错回显和处理
const handleCode = (code, msg) => {
  switch (code) {
    case invalidCode:
      Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, 'error')
      store.dispatch('user/resetAccessToken').catch(() => {})
      if (loginInterception) {
        location.reload()
      }
      break
    case noPermissionCode:
      router.push({ path: '/401' }).catch(() => {})
      break
    default:
      Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, 'error')
      break
  }
}


//axios实例创建
const instance = axios.create({
  baseURL, //请求根节点地址
  timeout: requestTimeout,//请求超时时限毫秒
  headers: {
    'Content-Type': contentType, //默认请求头
  },
})
//axios请求拦截
instance.interceptors.request.use(
  (config) => {
    //根据条件设置不同的请求头参数，根据自身功能调整
    const token = store.getters['user/accessToken']
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    //这里会过滤所有为空、0、false的key，如果不需要请自行注释
    // debugger
    // if (config.data)
    //   config.data = Vue.prototype.$baseLodash.pickBy(
    //     config.data,
    //     Vue.prototype.$baseLodash.identity
    //   )
    //不同请求头参数类型进行不同的转换
    if (config.data && config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8') config.data = qs.stringify(config.data)
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
//axios响应拦截
instance.interceptors.response.use(
  async (response) => {
    const { data, config } = response //获取响应数据data和请求数据config
    const { code, msg, Code } = data 
    console.log(data)
    // start
    if (Code == 401) {
      await store.dispatch('user/resetAccessToken')
      router.push({ path: '/login', replace: true }).then(() => {})
      return
    }
    //end
    // 操作正常Code数组
    const codeVerificationArray = isArray(successCode) ? [...successCode] : [...[successCode]]
    // 是否操作正常
    //返回数据
    if (codeVerificationArray.includes(code)) {
      return data
    } else {
      handleCode(code, msg)
      return Promise.reject('vue-admin-beautiful请求异常拦截:' + JSON.stringify({ url: config.url, code, msg }) || 'Error')
    }
  },
  (error) => {
    const { response, message } = error
    console.log('response', response)
    if (error.response && error.response.data) {
      const { status, data } = response
      handleCode(status, data.msg || message)
      return Promise.reject(error)
    } else {
      let { message } = error
     
      if (message.includes('timeout')) {
        message = '后端接口请求超时'
      }else{
         message = '后端接口连接异常'
      }
      Vue.prototype.$baseMessage(message || `后端接口未知异常`, 'error')
      return Promise.reject(error)
    }
  }
)

export default instance

///使用
import request from './request'
export function getList(params) {
  return request({
    url: `url`,
    method: 'get',
    params，
  })
}