uni-app 需要一个灵活的APP端网络Http请求库

在uni-app中，进行网络请求通常使用uni.request方法，这是uni-app框架提供的原生API，它封装了HTTP请求的细节，提供了简洁的接口来进行网络数据交互。虽然uni.request本身已经非常灵活和强大，但有时候我们可能希望封装一个更贴合项目需求的Http请求库，以增加一些如请求重试、全局请求头设置、错误处理等额外功能。

以下是一个简单的示例，展示如何封装一个灵活的Http请求库：

// http.js

const BASE_URL = 'https://api.example.com'; // 基础URL，根据实际情况修改
const TIMEOUT = 10000; // 请求超时时间

// 创建请求实例
const request = (url, method = 'GET', data = {}, headers = {}) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: `${BASE_URL}${url}`,
            method,
            data,
            header: {
                'Content-Type': 'application/json',
                ...headers,
            },
            timeout: TIMEOUT,
            success: (res) => {
                if (res.statusCode === 200) {
                    resolve(res.data);
                } else {
                    reject(new Error(`Error Status: ${res.statusCode}`));
                }
            },
            fail: (err) => {
                reject(err);
            },
        });
    });
};

// 封装GET请求
export const get = (url, data = {}, headers = {}) => request(url, 'GET', data, headers);

// 封装POST请求
export const post = (url, data = {}, headers = {}) => request(url, 'POST', data, headers);

// 使用示例
// 在页面的.vue文件中引入并使用
import { get, post } from '@/utils/http.js'; // 假设http.js放在utils目录下

export default {
    methods: {
        async fetchData() {
            try {
                const response = await get('/some-endpoint');
                console.log(response);
            } catch (error) {
                console.error(error);
            }
        },
        async submitData(data) {
            try {
                const response = await post('/another-endpoint', data);
                console.log(response);
            } catch (error) {
                console.error(error);
            }
        },
    },
};

这个示例展示了如何封装基本的GET和POST请求，并设置了基础URL和请求超时时间。你可以根据需要进一步扩展这个库，比如添加请求重试逻辑、全局错误处理、请求拦截器等。uni-app的uni.request方法非常灵活，能够满足大多数场景下的网络请求需求。