在Vue插件中引入axios http库,如何在项目中对插件库中的axios配置
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
目前遇到一个问题
为了项目方便扩展和使用,我用element-ui 组件二次封装成一个组件,供我的其他项目使用。
在这个组件中我引入了axios 进行http请求的处理。
【以下我用 项目 和 组件 进行区分】
我其他的项目 引用了我的组件,在我的项目也同样引用了axios处理我的http请求,我在我的项目中有对axios 进行一些配置 包括拦截器 等。但是这些都无法影响到我所引用的组件内部的请求
比如说,我在项目中在axios拦截器中加入了 header ,但是 我组件中的请求没有
我有做过如下 尝试,将组件内的axios 封装,然后在我项目去引用组件公开出来的axios,但是程序运行的时候一直是 undefiend 。
求助各位大神
组件内 axios 封装如下
import axios from "axios";
import qs from "qs";
// 创建axios实例 所有请求将基于本实例
const instance = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 50000, // 请求超时时间
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
paramsSerializer: function(params) {
// return qs.stringify(params, { arrayFormat: 'repeat' })
// 解决传递数组变成对象的问题 (仅将对象数组转换成json串)
Object.keys(params).forEach(key => {
if (
typeof params[key] === "object" &&
((Array.isArray(params[key]) && typeof params[key][0] === "object") ||
!Array.isArray(params[key]))
) {
params[key] = JSON.stringify(params[key]); // 这里必须使用内置JSON对象转换
}
});
params = qs.stringify(params, {
arrayFormat: "repeat"
}); // 这里必须使用qs库进行转换
return params;
},
withCredentials: true
});
// 暴露 配置
// 完整配置
// {
// baseURL : '',
// timeout : 30000,
// headers:{},
// requestHandler:config=>config,
// requestHandlerError:error=>Promise.reject(error),
// responseHandler:response=>response,
// responseHandlerError:error=>Promise.reject(error),
// }
// 基础配置
function axiosInit(config = {}) {
if (config.baseURL) {
instance.defaults.baseURL = config.baseURL;
}
if (config.timeout) {
instance.defaults.timeout = config.timeout;
}
if (config.headers) {
instance.defaults.headers = config.headers;
}
}
// 拦截器处理
function axiosInterceptor(interceptors = {}) {
// 请求拦截器
instance.interceptors.request.use(
function(config) {
// 在发送请求之前做些什么
if (interceptors.requestHandler) {
return interceptors.requestHandler(config);
}
return config;
},
function(error) {
// 对请求错误做些什么
if (interceptors.requestHandlerError) {
return interceptors.requestHandlerError(error);
}
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
function(response) {
if (interceptors.responseHandler) {
return interceptors.responseHandler(response);
}
return response;
},
function(error) {
// 对响应错误做点什么
if (interceptors.requestHandlerError) {
return interceptors.responseHandlerError(error);
}
return Promise.reject(error);
}
);
}
const install = (Vue, axiosConfig = {}) => {
axiosInit(axiosConfig);
axiosInterceptor(axiosConfig.interceptors);
Vue.prototype.$axios = instance;
};
// Vue.use(VueAxios, axios);
export default { name: "NpAxios", install, instance };