axios连接多个不同的后端接口

一、配置多个地址

在生产环境和开发环境都配置两个地址。可以使用。env.development和.env.production文件中设置基础路径。使用简易框架搭建的话，有下面这段代码就两种环境都有了。

`domainName:
 process.env.NODE_ENV == "production" ? 
  { baseurl1: "http://****:9002", baseurl2: "http://****:8001" }        
  : { baseurl1: "http://****:9001", baseurl2: "http://****:8000" }

二 、axios拦截器的配置

创建两个文件声明两个不同的拦截器

request.js文件的内容入下：

import axios from "axios";
import tools from "@/scripts/tools";
import appConsts from '@/scripts/app-consts';
import router from '@/router'

//axios 基本配置
let isLoading = true;
const service = axios.create({
    baseURL: appConsts.domainName.baseurl1,
    timeout: 1000 * 1000,
})

//http request 拦截器
service.interceptors.request.use(
    (config) => {
        if (isLoading) {
            tools.loadingStart();
        }
        let authorization = tools.getAuthorization();
        if (authorization) {          config.headers[appConsts.authorizationKeyName] = authorization;
        }
        config.headers["X-Requested-With"] = "XMLHttpRequest";
        config.headers["Content-Type"] = "application/json; charset=UTF-8";
        if (!config.data) return config;
        if (config.data.isUpload) config.headers["Content-Type"] = "multipart/form-data";
        return config;
    },
    (error) => {
        console.log(error);
        return Promise.reject(error);
    }
);

/**
 * 封装get方法
 * @param url
 * @param data
 * @param loading 是否有加载效果
 * @param headers 头部信息
 * @returns {Promise}
 */
export function get(url, data = {}, loading = true, config = {}) {
    isLoading = loading;
    config["params"] = data;
    return new Promise((resolve, reject) => {
        service
            .get(url, config)
            .then((response) => {
                if (response) resolve(response.data);
            })
            .catch((err) => {
                reject(err);
            });
    });
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @param loading 是否有加载效果
 * @param config config信息
 * @returns {Promise}
 */
export function post(url, data = {}, loading = true, config = {}) {
    isLoading = loading;
    return new Promise((resolve, reject) => {
        service.post(url, data, config).then(
            (response) => {
                if (response) resolve(response.data);
            },
            (err) => {
                reject(err);
            }
        );
    });
}
}

request_new.js内容基本同上

const service_new = axios.create({
    baseURL: appConsts.domainName.baseurl2,
    timeout: 1000 * 1000,
})

之前也有直接复制一份request.js文件，修改url，但是访问出现了问题。具体的问题就是因为没有使用axios.create。
只有一个url的时候采用直接赋值的方法。

axios.defaults.timeout = 100 * 1000;
axios.defaults.baseURL = appConsts.domainName ;

参考链接