Uniapp 小程序接口封装与使用

深入理解 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) => {// 获取存储tokenconst token = uni.getStorageSync("token");// 判断token是否存在且接口是否需要tokenif (!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，清除tokenconst 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块中捕获接口请求过程中可能出现的错误，并进行相应的错误处理，比如在控制台打印错误信息。