import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";
// 1. 创建axios实例
const service = axios.create({
// url基础地址,解决不同数据源url变化问题
// api/xxx
baseURL: process.env.VUE_APP_BASE_API,
// withCredentials: true, // 跨域时若要发送cookies需设置该选项
timeout: 5000 // 超时
});
// 请求拦截
service.interceptors.request.use(
config => {
// do something
// token附加
if (store.getters.token) {
// 设置令牌请求头
config.headers["Authorization"] = 'Bearer ' + getToken();
// config.headers["x-token"] = getToken();
}
return config;
},
error => {
// 请求错误预处理
//console.log(error) // for debug
return Promise.reject(error);
}
);
// 响应拦截
service.interceptors.response.use(
// 通过自定义code判定响应状态,也可以通过HTTP状态码判定
response => {
vue知识点总结之http单例封装和公共api配置
本文主要探讨 Vue.js 开发中如何进行 HTTP 请求的单例封装,以实现更高效、统一的 API 调用管理。同时,介绍了如何设置公共 API 配置,以简化项目中的请求路径,提高代码的可维护性和复用性。
摘要由CSDN通过智能技术生成