axios配置多个请求地址(打包后可通过配置文件修改)_axios怎么更改请求地址端口

开发过程中可能会遇到后端接口分布在多个地址下的情况,
这样调用不同接口时,就需要切换不同的请求地址;
我是这样处理的
核心代码:

// 2.请求拦截器
service.interceptors.request.use(
    (config) => {
        console.log('config', config);
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded', //配置请求头
            // 'Content-Type':'multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC'
        };
        switch (config.urlType) {
            case 'api1':
                config.url = baseURL + config.url;
                break;
            case 'api2':
                config.url = baseURL2 + config.url;
                break;
            default:
                config.url = baseURL + config.url;
        }
        //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        // const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
        // if(token){
        //   config.params = {'token':token} //如果要求携带在参数中
        //   config.headers.token= token; //如果要求携带在请求头中
        // }
        return config;
    },
    (error) => {
        Promise.reject(error);
    },
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在axios实例service中,通过判断传入参数的字段来更改url地址
以get请求为例

完整代码:
axios实例:

/****   request.js   ****/
// 导入axios
import axios from 'axios';
// 使用element-ui Message做消息提醒
import { ElMessage } from 'element-plus';
let baseURL = configUrl.Base_Resource_URL; //index.html引入的
let baseURL2 = configUrl.Base_Resource_URL2;
//1. 创建新的axios实例，
const service = axios.create({
    // 超时时间 单位是ms，这里设置了3s的超时时间
    timeout: 3 * 1000,
});
// 2.请求拦截器
service.interceptors.request.use(
    (config) => {
        console.log('config', config);
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded', //配置请求头
            // 'Content-Type':'multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC'
        };
        switch (config.urlType) {
            case 'api1':
                config.url = baseURL + config.url;
                break;
            case 'api2':
                config.url = baseURL2 + config.url;
                break;
            default:
                config.url = baseURL + config.url;
        }
        //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        // const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
        // if(token){
        //   config.params = {'token':token} //如果要求携带在参数中
        //   config.headers.token= token; //如果要求携带在请求头中
        // }
        return config;
    },
    (error) => {
        Promise.reject(error);
    },
);

// 3.响应拦截器
service.interceptors.response.use(
    (response) => {
        //接收到响应数据并成功后的一些共有的处理，关闭loading等

        return response;
    },
    (error) => {
        /***** 接收到异常响应的处理开始 *****/
        if (error && error.response) {
            // 1.公共错误处理
            // 2.根据响应码具体处理
            switch (error.response.status) {
                case 400:
                    error.message = error.response.data.msg;
                    break;
                case 401:
                    error.message = '未授权，请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误,未找到该资源';
                    window.location.href = '/';
                    break;
                case 405:
                    error.message = '请求方法未允许';
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                case 501:
                    error.message = '网络未实现';
                    break;
                case 502:
                    error.message = '网络错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网络超时';
                    break;
                case 505:
                    error.message = 'http版本不支持该请求';
                    break;
                default:
                    error.message = `连接错误${error.response.status}`;
            }
        } else {
            // 超时处理
            if (JSON.stringify(error).includes('timeout')) {
                ElMessage.error('服务器响应超时，请刷新当前页');
            }
            error.message = '连接服务器失败';
        }
        ElMessage.error(error.message);
        /***** 处理结束 *****/
        //如果不需要错误处理，以上的处理过程都可省略
        return Promise.resolve(error.response);
    },
);
//4.导入文件
export default service;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

分别封装请求方式:

/*
 * @Author: 老范
 * @Date: 2022-01-12 15:56:04
 * @LastEditors: 老范
 * @LastEditTime: 2022-01-19 11:52:42
 * @Description: 请填写简介
 */
/****   http.js   ****/
// 导入封装好的axios实例
import request from './request';

const http = {
    /**
     * methods: 请求
     * @param url 请求地址
     * @param params 请求参数
     */
    get(url, params, type) {
        const config = {
            method: 'get',
            url: url,
            urlType: type,
        };
        if (params) {
            config.params = params;
        }
        return request(config);
    },
    post(url, params, type) {
        const config = {
            method: 'post',
            url: url,
            urlType: type,
        };
        if (params) config.data = params;
        return request(config);
    },
    put(url, params, type) {
        const config = {
            method: 'put',
            url: url,
            urlType: type,
        };
        if (params) config.data = params;
        return request(config);
    },
    delete(url, params, type) {
        const config = {
            method: 'delete',
            url: url,
            urlType: type,
        };
        if (params) config.params = params;
        return request(config);
    },
};
//导出
export default http;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

具体接口例子:

/*
 * @Author: 老范
 * @Date: 2022-01-12 16:17:22
 * @LastEditors: 老范
 * @LastEditTime: 2022-01-19 11:53:39
 * @Description: 请填写简介
 */
import http from '../utils/http';
let model = '/api/model/';

// get请求

//根据ID获得单个模型信息
export function getModelParams() {
    return http.get(`/api/getModelList`, {}, 'api2'); //使用第二个地址
}
// post请求
// 获取模型集列表
export function getModelViewListAPI(params) {
    return http.post(`/api/modelView/search`, params, 'api1');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这样在封装接口函数时即可控制其请求地址,并且由于地址是由静态文件引入的,所以打包后的资源中依然有原文件,可通过该文件更改地址