//对于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
axios二次封装
最新推荐文章于 2024-06-12 15:37:27 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)