二次封装axios

在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候

我们经常会把axios进行二次封装。

目的:

1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

在根目录下创建utils/request.ts

1.
// 进行axios的二次封装：主要分为请求与响应拦截器
import axios from 'axios'
// 消息错误提示
import { ElMessage } from 'element-plus'
// 利用axios的对象的create方法，创建一个axios实例，这样可以对axios进行二次封装，可以对axios进行一些配置，比如基础路径以及超时时间
let request = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // 设置axios的默认的baseURL会携带/api
  timeout: 5000, // 设置axios的默认的超时时间
})
// request添加请求与响应拦截器
request.interceptors.request.use(
  (config) => {
    // 在请求发送之前做些什么
    // config.headers['token'] = 'xxx'
    return config
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  },
)
// 响应拦截器
request.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response.data
  },
  (error) => {
    // 失败回掉处理相关http状态码
    // 定义一个变量：存储错误信息
    let message = ''
    let status = error.response.status
    switch (status) {
      case 401:
        message = 'token过期'
        break
      case 403:
        message = '无权访问'
        break
      case 404:
        message = '请求地址错误'
        break
      case 500:
        message = '服务器出现问题'
        break
      default:
        message = '网络出现问题'
        break
    }
    ElMessage({
      message,
      type: 'error',
      duration: 3000,
    })
  },
)
// 对外暴露request
export default request;