vue2.0 + axios如何实现两个基础 URL同时存在与使用
背景：开发过程中遇到需要接入另外一个服务接口的需求，在只封装axios的基础上实现两个基础 URL同时使用的需求。思路如下：
一、首先，我们需要在utils文件下新建一个baseuel.js的文件作为保存基础url的js模块，代码如下：
//baseuel.js
//导出对应不同接口的URL地址
const configUrl = {
baseOneUrl: 'https://.......', //模块一地址
baseTwoUrl: 'https://.......',//模块二地址
}；
//导出
export default configUrl
二、然后，我们需要在request.js(即axios封装）中导入它并添加条件判断实现对Axios的包装。代码如下：
//request.js
//首先引入Axios库与刚刚定义的baseurl模块
import axios from "axios";
import baseurl from "./baseurl";
//然后创建一个baseRequest函数充当对Axios的包装。便于统一处理请求。它接受一个"optios"对象，其中包含了有关请求的信息，如HTTP方法、URL、数据和其他选项。
function baseRequest(optios) {
//通过三元表达式判断使用不同的基础URL
let instanceConfig = {
baseURL：判断条件 ？ baseUrl.baseOneUrl : baseUrl.baseTwoUrl,
timeout: 5000
};
//使用axios的create方法中创建一个新到Axios实例“instance”,并将基础URL和其他配置项数据传递进入。
const instance = axios.create(instanceConfig);
return instance(optios).then(res => {
const data = res.data || { }//请求成功返回data,如果没有data返回一个空对象。
//根据实际需求进行逻辑修改
if(data.code === 200 && data.data) {
return data.data
}else if(typeof data === "object" && !Array.isArray(data)) {
return data
}else {
return Promise.reject( {msg: "返回数据格式错误",res, data} )
}
//其他状态码处理
if（res.code !== 200) {
return Promise.reject( { msg: "请求失败",res, data } )
}
}).catch(err => {
//请求失败时的处理逻辑
console.log(err)
throw err; //继续抛出错误，以便在调用处进行处理
});
};
//最后，我们需要构建一个包含不同HTTP方法的“request”对象，并将它暴露出去。、
//创建request对象
const request = ["post", "put", "patch"].reduce((request,method) => {
/**
*@param url string 接口地址
*@param data object 参数
*@param options object axios配置项
**/
request[method] = (url,data = {}, optios = {}） => {
//调用上面定义的baseRequest函数
return baseRequest(Object.assign({url, data, methods }, optios));
};
return request;
},{});
["get", "delete", "head"].forEach(method => {
/**
*@param url string 接口地址
*@param data object 参数
*@param options object axios配置项
**/
request[method] = (url, params = {}, options = {}) => {
return baseRequest(Object.assign({url, params, method }, options));
};
});
//暴露request
export defalut request;
