前言:
最近在翻看以前的项目时,发现了在项目经常需要用到的axios的二次封装,总结一下,方便以后的使用:
import axios from 'axios';
// 创建自定义的 Axios 实例
const instance = axios.create({
baseURL: 'http://110.40.173.100:5173/api', // 设置基础URL
timeout: 5000, // 设置请求超时时间
});
// 添加请求拦截器
instance.interceptors.request.use(
(config) => {
config.headers["Access-Control-Allow-Origin"] = "*" // 允许跨域
const token = localStorage.getItem('token'); // 从本地存储获取token
if (token) {
// 在发送请求之前做一些处理,例如添加请求头、处理请求参数等
config.headers.Authorization = token; // 在请求头中添加身份验证令牌
}
return config;
},
(error) => {
// 处理请求错误
console.error('Request error:', error);
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
(response) => {
if (response.status === 200) {
return Promise.resolve(response.data)
} else {
return Promise.reject(response.data)
}
},
(error) => {
let message = ""
const status = error.response.code
switch (status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
message = "未登录"
break
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
message = "登录过期,请重新登录"
break
case 404:
message = "网络请求不存在"
break
case 500:
message = "服务器出现问题"
break
default:
message = error.response.data.message
break
}
return Promise.reject(error)
}
));
export default instance;