《axios统一接口管理》

在现代前端开发中，随着项目规模的增大，接口调用变得越来越复杂。为了提高代码的可维护性和可读性，我们可以使用axios进行统一接口管理。解决方案是创建一个专门的模块来集中定义和管理所有与后端交互的API接口，通过封装axios实例并添加一些通用配置（如请求、响应等），使得每个具体的接口调用更加简洁。

一、封装axios实例

安装axios：npm install axios，然后创建一个api.js文件来封装axios。

javascript
import axios from 'axios';</p>

<p>// 创建axios实例
const instance = axios.create({
    baseURL: 'https://api.example.com', // 根据实际情况设置基础url
    timeout: 5000
});</p>

<p>// 添加请求
instance.interceptors.request.use(config => {
    // 可以在这里添加token等公共参数
    config.headers['Authorization'] = localStorage.getItem('token');
    return config;
}, error => {
    return Promise.reject(error);
});</p>

<p>// 添加响应
instance.interceptors.response.use(response => {
    return response.data;
}, error => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                // 处理未授权错误
                break;
            case 403:
                // 处理禁止访问错误
                break;
            case 404:
                // 处理资源未找到错误
                break;
            default:
                // 其他错误处理
        }
    }
    return Promise.reject(error);
});</p>

<p>export default instance;

二、定义具体接口

接下来定义具体的接口函数。可以在api.js中继续添加，也可以创建新的js文件按功能模块划分。

例如定义获取用户信息的接口：

javascript
// 在api.js中或新建userApi.js
export function getUserInfo() {
return instance.get('/user/info');
}


如果要发送带有参数的post请求：

javascript
export function login(params) {
return instance.post('/user/login', params);
}


三、其他思路

1. 使用动态路由拼接

对于一些有规律的接口路径，可以使用动态拼接的方式。比如分页查询数据时，页面大小和当前页码可能会作为路径的一部分。

javascript
export function getTableData(pageNum, pageSize) {
return instance.get(`/data/table?pageNum=${pageNum}&pageSize=${pageSize}`);
}


2. 按模块划分接口文件

当项目非常庞大时，可以按照业务模块将接口函数分别放在不同的文件夹下，每个文件夹内再根据功能进一步细分文件。例如有用户模块、商品模块等，在对应的文件夹下分别创建userApi.js、productApi.js等文件，这样可以使接口管理更加清晰有序。