以100行代码打造小而美的uni-app请求库

在现代前端开发中，与后端进行数据交互是不可避免的一部分。Uni-app作为一个多平台框架，提供了许多内置API，但有时你可能希望自定义一个简洁且高效的请求库。本文将介绍如何以100行代码打造一个小而美的uni-app请求库。

准备工作

在开始编写请求库之前，请确保你已经安装并配置好HBuilderX和uni-app开发环境。如果你还没有创建项目，可以通过以下步骤快速创建：

1. 打开HBuilderX，选择“文件” -> “新建” -> “项目” -> “uni-app”。
2. 根据提示创建新项目。

请求库设计

我们的请求库将包含以下功能：

1. 基于Promise的请求方法。
2. 请求和响应拦截器。
3. 错误处理和统一的响应结构。

代码实现

以下是我们的请求库的完整代码：

// request.js
const BASE_URL = 'https://api.example.com';

// 请求拦截器
function requestInterceptor(config) {
    // 在发送请求之前做些什么
    console.log('Request Interceptor:', config);
    config.header = config.header || {};
    config.header['Authorization'] = 'Bearer token';
    return config;
}

// 响应拦截器
function responseInterceptor(response) {
    // 对响应数据做点什么
    console.log('Response Interceptor:', response);
    if (response.statusCode === 200) {
        return response.data;
    } else {
        return Promise.reject(response);
    }
}

// 请求函数
function request(options) {
    options.url = BASE_URL + options.url;
    options = requestInterceptor(options);
    return new Promise((resolve, reject) => {
        uni.request({
            ...options,
            success: (response) => {
                try {
                    const result = responseInterceptor(response);
                    resolve(result);
                } catch (error) {
                    reject(error);
                }
            },
            fail: (error) => {
                reject(error);
            }
        });
    });
}

// GET 请求
function get(url, params = {}, header = {}) {
    return request({
        url,
        method: 'GET',
        data: params,
        header
    });
}

// POST 请求
function post(url, data = {}, header = {}) {
    return request({
        url,
        method: 'POST',
        data,
        header
    });
}

// 导出方法
export default {
    get,
    post
};

使用示例

创建完成请求库后，可以在项目中轻松使用它进行HTTP请求。以下是一个简单的示例：

// 在页面中引入请求库
import request from '@/utils/request.js';

export default {
    data() {
        return {
            info: null,
        };
    },
    onLoad() {
        this.fetchData();
    },
    methods: {
        async fetchData() {
            try {
                const response = await request.get('/data', { id: 123 });
                this.info = response;
                console.log('Data:', response);
            } catch (error) {
                console.error('Error:', error);
            }
        }
    }
};

小结

通过以上步骤，我们用不到100行代码创建了一个简洁且功能强大的请求库。这个库包含了基本的请求和响应拦截器，以及常用的GET和POST方法。你可以根据实际需求进行扩展，例如增加更多的HTTP方法（PUT、DELETE等）、增强错误处理逻辑等。

希望这个教程对你在uni-app开发中有所帮助！如果有任何问题或建议，欢迎讨论和交流。