一、实现功能：
封装axios，包括配置环境（开发和正式环境请求路径）、请求拦截（请求拦截进来页面全局显示loading效果、断网提示等）、响应拦截（隐藏loading效果，对特殊响应码进行特殊处理等）
二、代码：
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.dataconst { SUCCESS, SESSION_EXPIRED, NOT_ACCESS, NEED_INIT_PWD, SERVICE_USED, SITE_USED } = ResponseCodeEnumif (errcode === SUCCESS) {return response.data} else if (errcode === SESSION_EXPIRED) {ElMessageBox.alert('你已被登出，需要重新登录','温馨提示',{confirmButtonText: '重新登录',type: 'warning',showClose: false}).then(() => {removeCookie()// 为了重新实例化vue-router对象 避免buglocation.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