axios进行封装

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

1、创建axios实例

配置接口基地址baseURL，接口超时时间timeout 等等

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.token
    if (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)
  }
)

4、导出axios实例

export default httpInstance

Token的有效性可以保持一段时间，如果用户一段时间不做任何操作，Token就会失效，使用失效的Token再去请求一些接口，接口就会报401状态码错误，需要我们做额外处理：

清除掉旧的token
切换成非登录状态
跳转到登录页面