axios 二次封装

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

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

• 目的:

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

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

axios 封装

文件结构

project root/
    |-- src/
        |-- utils/
            |-- request.ts

request.ts 响应拦截器与请求拦截器

// 引入 axios
import axios from 'axios'
import { ElMessage } from 'element-plus'
// 1. 利用axios 对象的 create 方法，创建axios 实例（基础路径，超时时间等）
const request = axios.create({
    // 基础路径上携带/api
    baseURL: import.meta.env.VITE_APP_BASE_API,
    // 超时
    timeout: 5000,
})
// 2. request 实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
    // config 配置对象，headers 属性请求头，经常给服务器端携带公共参数
    // 返回配置对象
    return config
})

// 3. 响应拦截器
request.interceptors.response.use(
    (response) => {
        // 成功回调
        // 简化数据
        return response.data
    },
    (error) => {
        // 失败的回调：处理http 网络错误
        // 定义一个变量存储网络错误信息
        let message: string = ''
        // http 状态码
        let status: number = error.response.status

        switch (status) {
            case 401:
                message = 'Token 过期'
                break
            case 403:
                message = '无权限访问'
                break
            case 404:
                message = '资源未找到'
                break
            case 500:
                message = '服务器错误'
                break
            default:
                message = `未知错误: ${status}`
                break
        }
        // 提示错误信息
        ElMessage({
            type: 'error',
            message,
        })
        /* 在错误处理中，通常会返回 Promise.reject(error) 以便在调用链中继续处理错误，
        比如在页面中显示错误提示等。*/
        return Promise.reject(error)
    },
)

// 对外暴露
export default request