axios二次封装

导读：axios用于网络请求、在开发时常常进行二次封装便于前端请求接口时，在网络请求和响应拦截器中做统一处理

1、创建axios实例

配置接口基地址baseURL，接口超时时间timeout 等等
VITE_BASE_URL 在.env文件中配置, 可查看上一篇.env文件详解

import axios from 'axios'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
// 用户信息操作模块，包含登录，登出等
import { useUserStore } from '@/stores/user'
import router from '@/router'const httpInstance = axios.create({baseURL: import.meta.env.VITE_BASE_URL,timeout: 5000,
})

2、请求拦截器

给接口请求头带上token，数据加密等等

httpInstance.interceptors.request.use(function (config) {// 在发送请求之前做些什么，比如token，数据加密const userStore = useUserStore()const token = userStore.userInfo.tokenif (token) {config.headers.Authorization = `Bearer ${token}`}if (config.data) config.data = "数据加密"return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)

3、响应拦截器

拦截登录失效401 及其他的非成功返回状态码，做出不同处理。
数据解密等

httpInstance.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据操作，比如解密return response},function (error) {const userStore = useUserStore()// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么if (error.response.status === 401) {// 拦截登录失效401错误userStore.toQuit()router.push('/login')}ElMessage({type: 'warning',message: error.response.data.msg,})return Promise.reject(error)}
)