微信小程序API接口封装与调用

        在微信小程序的开发旅程中，与后端服务器的顺畅通信是至关重要的。为了提升代码的可读性、可维护性以及复用性，将API接口进行科学合理的封装无疑是一个明智之举。以下是我个人在封装与使用API接口方面的一些心得与实践，旨在为大家提供一个参考与交流的平台，希望能够激发更多的灵感与讨论。

一、封装API接口

首先创建一个config.js文件，使得baseUrl等配置可以集中管理，代码如下。

export default{
    //基础请求路径
    // baseUrl:"http://127.0.0.1:8086",
    //图片路径
    // imageUrl:"http://127.0.0.1:8086/image/",
}

接着，我们需要创建一个request.js文件并引入config.js，用于封装网络请求函数。这个函数将负责处理请求的发送、响应的解析以及错误的处理，代码如下。

// 引入配置信息
import config from './config.js';
 
// 网络请求封装函数
export default function request(url, method, params) {
    // 返回一个Promise对象，用于处理异步请求
    return new Promise((resolve, reject) => {
        // 发起网络请求
        wx.request({
            url: config.baseUrl + url, // 完整的请求URL
            method: method, // 请求方法
            data: method === 'GET' ? params : JSON.stringify(params), // 根据请求方法设置参数格式
            // 设置请求头
            header: {
                // 根据后端API的要求设置Content-Type
                // 如果后端期望接收JSON格式的数据，则使用'application/json'
                // 并相应地修改data参数的格式（例如，使用JSON.stringify(params)）
                'content-type': 'application/json', // 或者 'application/x-www-form-urlencoded'
                'token': uni.getStorageSync("user")?.token || ' ', // 从本地存储中获取token，如果user为空则使用空字符串
            },
            success(res) {
                // 请求成功的回调
                console.log('响应拦截器success接口返回:', res);
                // 根据后端返回的状态码进行不同的处理
                switch (res.data.code) {
                    case '200': // 请求成功
                        resolve(res.data); // 将响应数据传递给Promise的resolve
                        break;
                    case '400': // 客户端请求错误
                        wx.showToast({
                            title: res.data.message || "请求有误，请检查您的输入或联系客服~",
                            icon: "none",
                            duration: 3000
                        });
                        reject(new Error(res.data.message || "客户端请求错误")); // 拒绝Promise并传递错误信息
                        break;
                    case '401': // 未授权
                    case '403': // 禁止访问
                        wx.showToast({
                            title: res.data.code === '401' ? "身份验证已过期，请重新登陆~" : "无权访问，请登录后再访问~",
                            icon: "none",
                            duration: 2000
                        });
                        // 导航到登录页面，注意这里使用redirectTo避免页面栈溢出
                        wx.redirectTo({
                            url: '/pages/login/login'
                        });
                        // 在这种情况下，我们可能不希望拒绝Promise，因为用户可能会重新登录并继续操作
                        // 但如果上层调用者需要知道这个错误，可以考虑使用其他方式通知（如全局事件总线）
                        break;
                    case '404': // 未找到资源
                        wx.showToast({
                            title: "系统出错啦，找不到资源~",
                            icon: "error",
                            duration: 2000
                        });
                        reject(new Error("未找到资源")); // 拒绝Promise并传递错误信息
                        break;
                    default: // 其他错误
                        reject(new Error("未知错误")); // 拒绝Promise并传递默认错误信息
                }
            },
            fail(err) {
                // 请求失败的回调
                console.error('请求失败:', err);
                wx.showToast({
                    title: "系统出现了意想不到的问题!",
                    icon: "none",
                    duration: 2000
                });
                reject(new Error("请求失败: " + (err.errMsg || "未知原因"))); // 拒绝Promise并传递错误信息
            },
            // complete回调通常用于清理工作，比如隐藏加载提示
            // 但在这个例子中，我们没有显示加载提示，所以不需要complete回调
            // 如果需要，可以在这里添加相关逻辑
        });
    });
}

// 注意事项：
// 1. 根据后端API的文档，确保请求的URL、方法、参数和请求头设置正确。
// 2. 如果后端期望接收JSON格式的数据，确保将params转换为JSON字符串（如果尚未转换）。
// 3. 考虑在全局范围内处理登录状态过期的情况，比如使用拦截器或全局事件总线。
// 4. 在生产环境中，避免在控制台打印敏感信息（如token）。

接下来，我们创建一个api.js文件，用于封装具体的API接口，代码如下。

// api.js
import request from "./request.js";
 
export default {
    wxLogin(param) { // 登录接口
        return request("/login", "POST", param);
    },
    getUserInfo(param) { // 用户获取自己的信息接口
        return request("/Api/getUserInfo", "GET", param);
    },
    checkMessageCode(param) { // 验证短信验证码接口
        return request("/Api/checkMessageCode", "GET", param);
    }
    // 可以继续添加其他接口
};

二、在页面中使用API接口

现在，我们已经封装好了API接口，接下来就可以在页面中使用它们了。首先，我们需要在页面文件中引入api.js。

// pages/somePage/somePage.js
import api from '../../api.js';
 
Page({
    data: {
        // 页面数据
    },
    onLoad() {
        // 页面加载时调用登录接口示例
        api.wxLogin({
            username: 'yourUsername',
            password: 'yourPassword'
        }).then(response => {
            // 登录成功后的处理
            console.log('登录成功', response);
            // 可以将token保存到本地存储中
            wx.setStorageSync('user', { token: response.token });
        }).catch(error => {
            // 登录失败后的处理
            console.error('登录失败', error);
        });
    },
    // 其他页面方法
});

在这个示例中，我们在页面加载时调用了登录接口，并根据返回的结果进行相应的处理。如果登录成功，我们将token保存到本地存储中，以便后续请求使用。

三、注意事项

1. 请求方法的选择：在调用API接口时，要注意选择正确的请求方法（GET或POST）。通常，获取数据使用GET方法，提交数据使用POST方法。

2. 参数的格式：根据后端API的要求，设置正确的参数格式。如果后端期望接收JSON格式的数据，则需要在调用请求函数时将参数转换为JSON字符串。

3. 错误处理：在调用API接口时，要做好错误处理，以便在请求失败时能够给用户友好的提示。

4. 安全性：在存储token等敏感信息时，要注意安全性。避免在控制台打印敏感信息，并在必要时使用加密措施。

通过以上步骤，我们就可以在微信小程序中封装并使用API接口了。封装API接口可以提高代码的可维护性和复用性，使得开发过程更加高效。希望这篇文章能够帮助您更好地理解和实践微信小程序API接口的封装与调用。如果您有任何疑问或建议，请随时与我联系。