uni-app webService接口支持封装

在uni-app中，封装webService接口是一个常见的需求，它有助于简化代码、提高可维护性，并使得接口调用更加统一和灵活。下面是一个简单的示例，展示如何在uni-app中封装webService接口。

首先，我们需要创建一个专门用于管理API请求的文件，比如api.js。在这个文件中，我们将定义一个基础的请求函数，以及基于这个基础函数封装的各个具体接口。

// api.js

// 引入uni.request方法
const uniRequest = uni.request;

// 基础请求函数，包含错误处理和请求头设置
function baseRequest(url, method = 'GET', data = {}, header = {}) {
    return new Promise((resolve, reject) => {
        uniRequest({
            url: url,
            method: method,
            data: data,
            header: {
                'Content-Type': 'application/json', // 默认请求头
                ...header // 合并用户自定义请求头
            },
            success: (res) => {
                if (res.statusCode === 200) {
                    resolve(res.data);
                } else {
                    reject(new Error(`Error Code: ${res.statusCode}`));
                }
            },
            fail: (err) => {
                reject(err);
            }
        });
    });
}

// 封装具体接口
export const getUserInfo = (userId) => {
    return baseRequest('/api/user/info', 'GET', { userId });
};

export const postComment = (commentData) => {
    return baseRequest('/api/comment', 'POST', commentData);
};

// 其他接口可以继续封装...

然后，在需要使用这些API的地方，比如某个页面或组件中，我们可以直接引入并使用这些封装好的接口。

// pages/index/index.vue

<script>
import { getUserInfo, postComment } from '@/api.js';

export default {
    data() {
        return {
            userInfo: null,
        };
    },
    methods: {
        async fetchUserInfo(userId) {
            try {
                const info = await getUserInfo(userId);
                this.userInfo = info;
            } catch (error) {
                console.error('Failed to fetch user info:', error);
            }
        },
        async submitComment(commentData) {
            try {
                await postComment(commentData);
                console.log('Comment submitted successfully');
            } catch (error) {
                console.error('Failed to submit comment:', error);
            }
        }
    },
    // ...其他代码
};
</script>

通过上述方式，我们实现了在uni-app中对webService接口的封装，使得接口调用更加简洁和易于管理。同时，由于使用了Promise，我们可以方便地进行异步操作和处理错误。