axios二次封装

最新推荐文章于 2024-06-12 15:37:27 发布

小野晨曦

最新推荐文章于 2024-06-12 15:37:27 发布

阅读量300

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/GarbageO_O/article/details/138251111

版权

本文介绍了如何在项目中对axios函数库进行二次封装，以利用其请求和响应拦截器功能，包括设置基础路径、超时时间，以及在请求头中携带公共参数如token，并处理常见的HTTP错误情况。

摘要由CSDN通过智能技术生成

//对于axios函数库进行二次封装？
//你工作的时候是否axios进行二次封装？二次封装的目的是什么呢？
//目的1：利用axios请求、响应拦截器功能
//目的2：请求拦截器，一般可以再请求头中携带公告的参数：token
//目的3：响应拦截器，可以简化服务器返回的数据，处理http网络错误
import axios from "axios"
import { ElMessage } from "element-plus"
//利用axios.create方法创建一个axio实例：可以设置基础路径、超时的时间设置
const request = axios.create({
    baseURL:'/api',//请求的基础路径设置
    timeout:5000//超时的时间的设置，超出五秒请求就是失败的
})

//请求拦截器
request.interceptors.request.use((config) => {
    //config：请求拦截器回调注入的对象(配置对象)，配置对象的身上最终要的一件事情headers属性
    //可以通过请求头携带公共参数token
    return config
})
//响应拦截器
request.interceptors.response.use((response) => {
    //响应拦截器成功的回调，一般会进行简化数据 
    return response.data
},(error) => {
    let status = error.response.status
    switch(status){ 
        case 404:
            //错误提示信息
            ElMessage({
                type:'error',
                message:'请求失败路径出现问题'
            })
            break
        case 500|501|502|503|504|505:
            ElMessage({
                type:'error',
                message:'服务器挂了'
            })
            break
        case 401:
            ElMessage({
                type:'error',
                message:'参数有误'
            })
            break
    }
    //处理http网络错误
    return Promise.reject(new Error(error.message))
})

//务必对外暴露axios
export default request