/*
封装axios
*/
// 弹窗
import { ElMessage } from "element-plus";
import axios from 'axios';
import store2 from 'store2'
// 创建一个 axios 的实例,并配置一些默认的参数
const instance = axios.create({
/**
* 基准地址
* request.get('/abcd') => http://127.0.0.1:5173/abcd
* 后续处理本地开发与生产上线的环境变量
*/
baseURL: "/api", // 不加协议、域名、端口 默认本地
/**
* 赶超时间 单位是毫秒
* 发出请求后300ms后未响应,请求会直接中断
*/
timeout: 300,
/**
* 自定义请求头
*/
headers: {
"hello": 'gogogo',
}
});
/**
* 请求拦截器
*/
instance.interceptors.request.use(
/*
成功 config请求的配置项
应用场景:统一配置token
*/
(config) => {
// 自定义一个配置项
const token = store2.get("token")
if(token){
config.headers.Authorization=token;
}
return config; // 必须返回
},
// 失败
(error) => {
return Promise.reject(error); // 必须返回
})
/**
* 响应拦截器
*/
instance.interceptors.response.use(
/**
* 响应成功 response是axios包装的对象
* 必须返回数据, .then的回调函数参数
* 触发时机
* 1、接口请求成功,HTTP状态码为2xx或304(协商缓存,也是成功的)
* 2、在业务代码的 .then之前触发
*/
(response) => {
// 获取数据
const { data } = response;
// 判断业务是否成功
if (data.code === 1000) {
// 返回数据
return data.data;
} else {
ElMessage.error(data.message)
return Promise.reject(response);
}
},
/**
* 必须返回 return Promise.reject(error)
* 触发时机
* 1、接口请求成功,HTTP状态码非 为2xx或304(协商缓存,也是成功的)
* 2、在业务代码的 .then之前触发
*/
(error) => {
// 根据 HTTP 状态码来处理不同的业务逻辑
console.log("error", error);
// 1. 获取到 HTTP 状态码
const { status } = error.response; // 服务器的信息
// 2. 获取中文的错误描述
const { message } = error.response.data; // 后端的信息
// 3. switch
switch (status) {
case 401:
// 没有权限
ElMessage.error(message);
break;
case 502:
// 没有权限
ElMessage.error("网关错误");
break;
case 503:
// 没有权限
ElMessage.error("服务器异常,请稍后重试");
break;
default:
break;
}
return Promise.reject(error);
})
export default instance;