Vue3 封装axios

一、实现功能：

封装axios，包括配置环境（开发和正式环境请求路径）、请求拦截（请求拦截进来页面全局显示loading效果、断网提示等）、响应拦截（隐藏loading效果，对特殊响应码进行特殊处理等）

二、配置环境：

VUE_APP_API_ROUTER在环境管理中配置：

代码如下： 

// 配置环境
const options = {
  baseURL: process.env.VUE_APP_API_ROUTER
}

三、请求拦截：

（请求拦截进来页面全局显示loading效果、断网提示等）

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 调用显示loading效果
  // showLoading()

  // 断网提示
  if (!navigator.onLine) {
    ElMessageBox.alert(
      '您的网络故障，请检查!',
      '温馨提示',
      {
        confirmButtonText: '好的',
        type: 'warning'
      }
    )
  }
  return config
}, error => {
  console.log('请求拦截error', error)
  // 对请求错误做些什么
  return Promise.reject(error)
})

四、响应拦截：

（隐藏loading效果，对特殊响应码进行特殊处理等）

// http response 拦截器
instance.interceptors.response.use(response => {
  // 隐藏loading效果。此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启
  // setTimeout(() => {
  //   hideLoading()
  // }, 200)

  const { errcode, errmsg } = response.data
  const { SUCCESS, SESSION_EXPIRED, NOT_ACCESS, NEED_INIT_PWD, SERVICE_USED, SITE_USED } = ResponseCodeEnum

  if (errcode === SUCCESS) {
    return response.data
  } else if (errcode === SESSION_EXPIRED) {
    ElMessageBox.alert(
      '你已被登出，需要重新登录',
      '温馨提示',
      {
        confirmButtonText: '重新登录',
        type: 'warning',
        showClose: false
      }
    ).then(() => {
      removeCookie()
      // 为了重新实例化vue-router对象 避免bug
      location.reload()
    })
  } else {
    if (errcode === NOT_ACCESS) {
      router.push(PageEnum.NOT_PERMIT)
    } else if (errcode !== NEED_INIT_PWD && errcode !== SERVICE_USED && errcode !== SITE_USED) {
      ElMessage.error(errmsg)
    }
    return Promise.reject(response.data)
  }
}, error => {
  // setTimeout(() => {
  //   hideLoading()
  // }, 200)

  ElMessage({
    message: '服务器异常，请稍后再试',
    type: 'error',
    duration: 3 * 1000
  })
  return Promise.reject(error)
})

五、代码： 

import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { removeCookie } from '@/utils/auth'
import router from '@/router/index'
import { PageEnum } from '@/enums/pageEnum'
import { ResponseCodeEnum } from '@/enums/httpEnum'
// import { showLoading, hideLoading } from '@/utils/loading'

// 配置环境
const options = {
  baseURL: process.env.VUE_APP_API_ROUTER
}
const instance = axios.create(options)

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 调用显示loading效果
  // showLoading()

  // 断网提示
  if (!navigator.onLine) {
    ElMessageBox.alert(
      '您的网络故障，请检查!',
      '温馨提示',
      {
        confirmButtonText: '好的',
        type: 'warning'
      }
    )
  }
  return config
}, error => {
  console.log('请求拦截error', error)
  // 对请求错误做些什么
  return Promise.reject(error)
})

// http response 拦截器
instance.interceptors.response.use(response => {
  // 隐藏loading效果。此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启
  // setTimeout(() => {
  //   hideLoading()
  // }, 200)

  const { errcode, errmsg } = response.data
  const { SUCCESS, SESSION_EXPIRED, NOT_ACCESS, NEED_INIT_PWD, SERVICE_USED, SITE_USED } = ResponseCodeEnum

  if (errcode === SUCCESS) {
    return response.data
  } else if (errcode === SESSION_EXPIRED) {
    ElMessageBox.alert(
      '你已被登出，需要重新登录',
      '温馨提示',
      {
        confirmButtonText: '重新登录',
        type: 'warning',
        showClose: false
      }
    ).then(() => {
      removeCookie()
      // 为了重新实例化vue-router对象 避免bug
      location.reload()
    })
  } else {
    if (errcode === NOT_ACCESS) {
      router.push(PageEnum.NOT_PERMIT)
    } else if (errcode !== NEED_INIT_PWD && errcode !== SERVICE_USED && errcode !== SITE_USED) {
      ElMessage.error(errmsg)
    }
    return Promise.reject(response.data)
  }
}, error => {
  // setTimeout(() => {
  //   hideLoading()
  // }, 200)

  ElMessage({
    message: '服务器异常，请稍后再试',
    type: 'error',
    duration: 3 * 1000
  })
  return Promise.reject(error)
})

export default instance