Uniapp 小程序接口封装与使用

news2025/2/28 0:10:04

深入理解 Uniapp 小程序接口封装与使用

在 Uniapp 小程序开发中，接口请求是获取和交互数据的关键部分。合理地封装接口不仅能提高代码的可维护性，还能增强项目的健壮性。今天，我们就来详细探讨一下如何在 Uniapp 中进行接口封装、引入以及使用。

一、接口封装原理

接口封装的核心目的是将复杂的请求逻辑进行抽象，使得在不同页面调用接口时更加简洁和统一。通过封装，我们可以集中处理诸如请求地址拼接、请求头设置、加载状态管理、错误处理以及登录状态验证等通用操作。

二、具体实现步骤

（一）创建请求封装文件

在 utils 目录下创建 request.js 文件，这是我们接口封装的核心代码所在。

// const BASEURL = 'http://xxx.xxx' 
const BASEURL = 'https://xxx.xxx.fun';

/*
 * 全局请求封装
 * @param path 请求路径
 * @param method 请求类型(GET/POST/DELETE等)
 * @param data 请求体数据
 * @param loading 请求未完成是是否显示加载中，默认为true
 * @param needToken 是否需要token，默认为false
 */
export default (path, method, data = {}, loading = true, needToken = false) => {
    // 获取存储token
    const token = uni.getStorageSync("token");

    // 判断token是否存在且接口是否需要token
    if (!token && needToken) {
        // const showToastMessage = (message) => {
        //     uni.showToast({
        //         icon: "none",
        //         title: message
        //     });
        // };
        // showToastMessage('请登录后操作');
        return;
    }

    if (loading) {
        uni.showLoading({
            title: "加载中",
            mask: true
        });
    };

    // 根据接口是否需要token以及token是否存在来决定调用的请求函数
    if (needToken && token!= '') {
        return tokenRequest(path, method, data, loading, token)
    } else {
        return noTokenRequest(path, method, data, loading)
    }
};

// 无token时发送请求函数
function noTokenRequest(path, method, data, loading) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASEURL + path,
            method: method,
            data,
            success(response) {
                // console.log('响应拦截');
                if (response.statusCode === 401) {
                    // 若本地存在token，清除token
                    const token = uni.getStorageSync("token");
                    if (token) {
                        // uni.removeStorageSync('token');
                    }
                    // 提示用户请先登录
                    uni.showToast({
                        icon: "none",
                        title: '请登录后操作',
                        duration: 1000
                    });
                    return
                    // 去登录
                }
                resolve(response.data);
            },
            fail(err) {
                uni.showToast({
                    icon: "none",
                    title: '服务响应失败'
                });
                console.error(err);
                reject(err);
            },
            complete() {
                uni.hideLoading();
            }
        });
    });
}

// 有token时发送请求函数
function tokenRequest(path, method, data, loading, token) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASEURL + path,
            method: method,
            data,
            header: {
                "token": token
            },
            success(response) {
                if (response.statusCode === 401) {
                    // 清除本地存储的token
                    // uni.removeStorageSync('token');
                    // 提示用户请先登录
                    // uni.showToast({
                    //     icon: "none",
                    //     title: '请登录后操作',
                    //     duration: 1000
                    // });
                    return
                    // 去登录
                }
                // console.log(response.data);
                resolve(response.data);
            },
            fail(err) {
                uni.showToast({
                    icon: "none",
                    title: '服务响应失败'
                });
                console.error(err);
                reject(err);
            },
            complete() {
                uni.hideLoading();
            }
        });
    });
}

export {
    BASEURL
}

代码解析

基础 URL 定义：首先定义了 BASEURL，这是所有接口请求的基础地址。在实际项目中，根据后端接口的部署地址进行修改。
全局请求封装函数：export default 导出的函数接收五个参数，分别是请求路径 path、请求类型 method、请求体数据 data、是否显示加载状态 loading 以及是否需要 token 的标识 needToken。在函数内部，首先获取本地存储的 token，如果接口需要 token 但 token 不存在，则直接返回，提示用户登录（这里的提示代码被注释，实际使用时可根据需求开启）。如果 loading 为 true，则显示加载提示。最后根据是否需要 token 以及token 是否存在，调用不同的请求函数。
无token请求函数 noTokenRequest：返回一个 Promise，使用 uni.request 发起请求。在成功回调中，如果响应状态码为 401，表示未授权，若本地存在 token则清除（注释部分，可根据需求启用），并提示用户登录。若请求成功，将响应数据通过resolve返回。在失败回调中，显示错误提示并通过 reject 抛出错误。无论请求成功与否，在 complete 回调中隐藏加载提示。
有token请求函数 tokenRequest：与 noTokenRequest 类似，只是在请求头中添加了 token。

（二）创建业务接口文件

在utils目录下创建 user.js 文件，用于定义与用户相关的接口。

import request from './request.js'; // 封装的request.js文件的位置

export const checkUser = (data) => {
    return request('/api/xxx/xxx', 'POST', data, true, true)
}

代码解析
通过导入 request.js 中封装的请求函数，定义了 checkUser 接口函数。该函数调用 request 并传入特定的请求路径、请求类型、请求数据、是否显示加载以及是否需要 token 等参数，从而实现对用户相关接口的封装。

三、接口的引入与使用

（一）在页面中引入接口

在 page/index/index.vue 页面中引入 user.js 中定义的接口。

import {
    checkUser
} from '@/utils/api/user.js'

（二）在页面方法中使用接口

async handleSend() {
    try {
        const res = await checkUser(this.id);
        // 这里可以对接口返回的数据进行进一步处理
    } catch (error) {
        // 捕获接口请求过程中的错误
        console.error('接口请求错误:', error);
    }
}

代码解析

使用 async/await 语法来处理异步请求，使得代码看起来更像是同步执行，提高代码的可读性。
在 try 块中调用 checkUser 接口，并传入 this.section_id 作为请求数据。接口返回的数据会赋值给 res，之后可以对res进行进一步的数据处理和业务逻辑操作。
在catch块中捕获接口请求过程中可能出现的错误，并进行相应的错误处理，比如在控制台打印错误信息。