在Vue插件中引入axios http库,如何在项目中对插件库中的axios配置
发布于 3 年前 作者 feer 1205 次浏览 来自 问答
粉丝福利 : 关注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 };
回到顶部