layui vue admin教程：http配置多个baseURL分别请求不同后端服务

桃扇骨 2024-02-25 07:51 23阅读 0赞

## layui-vue-admin HTTP配置 ##

import axios, {
         AxiosRequestHeaders, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
    import {
         useUserStore } from "../store/user";
    import {
         layer } from '@layui/layui-vue';
    import router from '../router'
    
    type TAxiosOption = {
        
        timeout: number;
        baseURL: string;
    }
     
    const config: TAxiosOption = {
        
        timeout: 5000,
        baseURL: "http://localhost:8080"
    }
     
    class Http {
        
        service;
        constructor(config: TAxiosOption) {
        
            this.service = axios.create(config)
    
            /* 请求拦截 */
            this.service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
        
                const userInfoStore = useUserStore();
                if (userInfoStore.token) {
        
                    (config.headers as AxiosRequestHeaders).token = userInfoStore.token as string
                } else {
        
                    if(router.currentRoute.value.path!=='/login') {
        
                        router.push('/login');
                    }
                }
                return config
            }, error => {
        
                return Promise.reject(error);
            })
    
            /* 响应拦截 */
            this.service.interceptors.response.use((response: AxiosResponse<any>) => {
        
                switch (response.data.code) {
        
                    case 200:
                        return response.data;
                    case 500:
                        return response.data;
                    case 99998:
                        layer.confirm(
                        '会话超时, 请重新登录', 
                        {
         icon : 2, yes: function(){
        
                            router.push('/login');
                            layer.closeAll()
                        }});
                        return response.data;
                    default:
                        break;
                }
            }, error => {
        
                return Promise.reject(error)
            })
        }
    
        /* GET 方法 */
        get<T>(url: string, params?: object, _object = {
        }): Promise<any> {
        
            return this.service.get(url, {
         params, ..._object })
        }
        /* POST 方法 */
        post<T>(url: string, params?: object, _object = {
        }): Promise<any> {
        
            return this.service.post(url, params, _object)
        }
        /* PUT 方法 */
        put<T>(url: string, params?: object, _object = {
        }): Promise<any> {
        
            return this.service.put(url, params, _object)
        }
        /* DELETE 方法 */
        delete<T>(url: string, params?: any, _object = {
        }): Promise<any> {
        
            return this.service.delete(url, {
         params, ..._object })
        }
    }
    
    export default new Http(config)

## 代码解释 ##

这段代码是一个封装了 Axios 库的 HTTP 请求类。它使用了 TypeScript 进行类型定义，并引入了一些依赖库和模块。

首先，代码导入了一些需要的依赖：

*  `axios`：Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求。
 *  `useUserStore`：这是一个自定义的用户存储模块，用于获取用户信息。
 *  `layer`：这是一个第三方库 ‘@layui/layui-vue’ 中的模块，可能用于显示弹出层。
 *  `router`：这是一个自定义的路由模块，用于处理页面跳转。

然后，代码定义了一个类型 `TAxiosOption`，表示 Axios 的配置选项，包括 `timeout` 和 `baseURL`。

接下来，代码创建了一个 `Http` 类，构造函数接受一个 `config` 参数，该参数是一个 `TAxiosOption` 类型的对象。在构造函数中，通过 `axios.create` 方法创建了一个 Axios 实例，并将传入的配置参数应用到该实例。

然后，代码添加了请求拦截器和响应拦截器。请求拦截器用于在每次请求前进行一些操作，比如添加请求头信息。响应拦截器用于在每次接收到响应后进行一些操作，比如根据响应的状态码进行处理。

在请求拦截器中，首先通过 `useUserStore` 获取用户信息的存储对象 `userInfoStore`。如果存在用户的身份令牌 `token`，则将其添加到请求头中。否则，如果当前路由不是登录页面(`/login`)，则跳转到登录页面。

在响应拦截器中，根据响应的数据中的 `code` 字段进行判断。如果 `code` 是 200，500 或 99998，分别进行不同的处理。其中，当 `code` 是 99998 时，会显示一个确认对话框，提示会话超时并要求重新登录，并在确认时跳转到登录页面。

最后，代码定义了一些 HTTP 请求方法，包括 `get`、`post`、`put` 和 `delete`。这些方法使用 Axios 实例发送对应的 HTTP 请求，并返回 Promise 对象，以便在异步调用时进行处理。

最后一行代码使用 `new Http(config)` 创建了一个 `Http` 的实例，并将其导出为默认模块。这样，在其他文件中导入这个模块时，就可以直接使用该实例进行 HTTP 请求操作。

## 配置多个baseURL代码示例 ##

是的，`baseURL` 可以配置多个，以便分别请求不同的后端服务。

在上述代码中，`config` 对象定义了 `baseURL` 属性，它被设置为 `"http://localhost:8080"`，表示所有的请求都会发送到该 URL。如果你想要请求不同的后端服务，可以根据需要修改 `baseURL` 的值。

例如，假设你有两个后端服务，一个运行在 `http://api1.example.com`，另一个运行在 `http://api2.example.com`，你可以按照以下方式修改代码：

const config1: TAxiosOption = {
        
      timeout: 5000,
      baseURL: "http://api1.example.com"
    };
    
    const config2: TAxiosOption = {
        
      timeout: 5000,
      baseURL: "http://api2.example.com"
    };
    
    class Http1 extends Http {
        
      constructor() {
        
        super(config1);
      }
    }
    
    class Http2 extends Http {
        
      constructor() {
        
        super(config2);
      }
    }
    
    export const http1 = new Http1();
    export const http2 = new Http2();

在上面的代码中，我们定义了两个不同的 `config` 对象：`config1` 和 `config2`，它们分别对应两个不同的后端服务。然后，我们创建了两个继承自 `Http` 的子类 `Http1` 和 `Http2`，并在构造函数中传入相应的 `config` 对象。

最后，我们导出了 `http1` 和 `http2` 作为模块的默认导出，这样在其他文件中导入模块时，就可以使用 `http1` 和 `http2` 对象进行不同后端服务的请求操作。

使用示例：

import {
         http1, http2 } from './httpModule';
    
    http1.get('/users').then(response => {
        
      console.log(response);
    }).catch(error => {
        
      console.error(error);
    });
    
    http2.get('/products').then(response => {
        
      console.log(response);
    }).catch(error => {
        
      console.error(error);
    });

在上面的示例中，我们分别使用 `http1` 和 `http2` 对象发送不同的 GET 请求，分别对应不同的后端服务。

--------------------

links：  
[  
https://gitee.com/layui-vue/layui-vue-admin.git][https_gitee.com_layui-vue_layui-vue-admin.git]

[https_gitee.com_layui-vue_layui-vue-admin.git]: https://gitee.com/layui-vue/layui-vue-admin.git