封装axios的过程

一、解决方案

在项目开发中，直接使用 axios 发起请求虽然方便，但每次都要重复设置基础 URL、超时时间等配置，并且对于请求和响应的拦截处理也较为分散。封装 axios 可以将这些通用的配置集中管理，简化请求代码的编写，同时便于统一处理错误、添加 token 等操作。

二、基于单个实例的封装

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

<p>// 创建axios实例
const instance = axios.create({
    baseURL: 'https://api.example.com', // 设置基础url
    timeout: 5000, // 设置超时时间
    headers: {'Content-Type': 'application/json'} // 设置默认请求头
});</p>

<p>// 添加请求
instance.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么
        // 例如添加token到请求头
        const token = localStorage.getItem('token');
        if(token){
            config.headers['Authorization'] = <code>Bearer ${token};
        }
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);


// 添加响应
instance.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        // 假设后端约定成功的状态码为200
        if(response.status === 200){
            return response.data;
        }else{
            return Promise.reject('请求失败');
        }
    },
    error => {
        // 对响应错误做点什么
        if(error.response){
            switch(error.response.status){
                case 401:
                    // 处理未授权的情况
                    console.log('未授权');
                    break;
                case 403:
                    // 处理禁止访问的情况
                    console.log('禁止访问');
                    break;
                case 404:
                    // 处理资源未找到的情况
                    console.log('资源未找到');
                    break;
                case 500:
                    // 处理服务器内部错误
                    console.log('服务器内部错误');
                    break;
                default:
                    console.log('其他错误');
            }
        }
        return Promise.reject(error);
    }
);

export default instance;

三、基于函数式封装

我们也可以通过创建一个函数来封装 axios 的请求方法，这种方式更加灵活。

```javascript
import axios from 'axios';

function request(options){
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {'Content-Type': 'application/json'}
});

// 请求拦截
instance.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if(token){
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
},error => {
    return Promise.reject(error);
});

// 响应拦截
instance.interceptors.response.use(response => {
    if(response.status === 200){
        return response.data;
    }else{
        return Promise.reject('请求失败');
    }
},error => {
    if(error.response){
        switch(error.response.status){
            case 401:
                console.log('未授权');
                break;
            case 403:
                console.log('禁止访问');
                break;
            case 404:
                console.log('资源未找到');
                break;
            case 500:
                console.log('服务器内部错误');
                break;
            default:
                console.log('其他错误');
        }
    }
    return Promise.reject(error);
});

return instance(options);

}

export default request;
```
在实际项目中，可以根据项目的复杂度和需求选择合适的封装方式。如果项目结构较为简单，单个实例封装可能更合适；而如果项目中需要根据不同业务场景动态创建不同的 axios 实例，那么函数式封装会更加灵活。