《axios简单的封装》

解决方案

在现代前端开发中，与后端进行数据交互是常见的需求。axios是一个流行的基于Promise的HTTP客户端，它能够简化我们与服务器之间的通信。在实际项目中，直接使用axios可能会导致代码重复和难以维护。我们可以对axios进行简单封装，以提高代码的可复用性和可读性。

一、为什么要封装axios

1. 统一配置：如请求超时时间、默认的基础URL等，避免在每个请求中都设置。
2. 处理：可以在请求发送前或响应接收后进行一些操作，例如添加token验证、错误提示等。

二、简单的封装实现

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

<p>// 创建axios实例
const instance = axios.create({
    // 基础url，可以根据项目实际情况设置
    baseURL: 'https://api.example.com/',
    // 请求超时时间
    timeout: 5000
});</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为成功状态码，并且返回的数据结构有data字段才是真正的数据
        if(response.status === 200){
            return response.data;
        }else{
            return Promise.reject('请求失败');
        }
    },
    error => {
        // 对响应错误做点什么
        if (error.response) {
            // 请求已发出，但服务器响应的状态码不在 2xx 范围内
            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('其他错误信息');
            }
        } else {
            // 处理断网的情况
            if (!window.navigator.onLine) {
                console.log('断网啦~');
            } else {
                console.log('连接服务器失败');
            }
        }
        return Promise.reject(error);
    }
);

// 封装get请求
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        instance.get(url, { params })
            .then(response => {
                resolve(response);
            })
            .catch(error => {
                reject(error);
            });
    });
}

// 封装post请求
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        instance.post(url, data)
            .then(response => {
                resolve(response);
            })
            .catch(error => {
                reject(error);
            });
    });
}

三、其他思路

1. 参数序列化：对于一些特殊的接口，可能需要对请求参数进行序列化。可以在封装的时候，针对特定的请求方法（如post），判断是否需要序列化参数。如果是，则使用qs库等进行序列化。
2. 支持文件上传和下载：如果项目中有文件相关的操作，可以进一步扩展封装函数。例如在post请求中，当检测到data中有文件类型的对象时，调整请求头Content - Type为multipart/form - data，并且使用FormData对象来组织数据。对于文件下载，可以在响应中判断响应头Content - Type为文件类型时，创建a标签并触发点击事件实现下载。