/*
封装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;
二次封装axios
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 前言 一个好的代码规范 会让自己以及后来者更容易解读 ,而代码拆分也是一样的 这样的话 也更容易进行更改 正题...
- axios 是什么??axios是基于promise(诺言)用于浏览器和node.js是http客户端。作用??a...