当前位置: 首页 > news >正文

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
}

代码解析

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

代码解析

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

四、总结

通过上述步骤,我们完成了 Uniapp小程序中接口的封装、引入和使用。这种封装方式使得代码结构更加清晰,每个部分各司其职,便于维护和扩展。在实际项目中,我们可以根据不同的业务模块创建更多的接口文件,进一步细化接口封装,提高开发效率。

希望这篇文章能帮助大家更好地掌握 Uniapp 小程序接口相关的开发技巧。如果在实践过程中有任何疑问或遇到问题,欢迎随时交流讨论。

相关文章:

Uniapp 小程序接口封装与使用

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

Harmony开发笔记(未完成)

一、感想 作为一名拥有11年经验的Android开发者,我亲历了Android从高速发展到如今面临“僧多粥少”的过程。技术的世界瞬息万变,没有一种技术能够让人依赖一辈子。去年初,我自学了鸿蒙系统,并顺利通过了鸿蒙官方的初级和高级认。…...

观成科技:海莲花“PerfSpyRAT”木马加密通信分析

1.概述 在2024年9月中旬至10月,东南亚APT组织“海莲花”通过GitHub发布开源安全工具项目,针对网络安全人员发起了定向攻击。通过对相关攻击活动进行分析,可以将其与一些海莲花的样本关联起来。这些样本的通信数据结构与海莲花此前使用的攻击…...

Spring Boot @Async 注解深度指南

Spring Boot Async 注解深度指南 一、核心使用要点 启用异步支持 必须在启动类或配置类添加 EnableAsync,否则异步不生效。 SpringBootApplication EnableAsync public class Application { ... }线程池配置 默认问题:Spring 默认使用 SimpleAsyncTaskEx…...

windows设置暂停更新时长

windows设置暂停更新时长 win11与win10修改注册表操作一致 ,系统界面不同 1.打开注册表 2.在以下路径 \HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings 右键新建 DWORD 32位值,名称为FlightSettingsMaxPauseDays 根据需求填写数…...

Orange 开源项目 - 集成百度智能云-千帆大模型

1 集成百度智能云-千帆大模型 百度智能云-千帆ModelBuilder百度智能云千帆大模型服务与开发平台ModelBuilder(以下简称千帆ModelBuilder)是面向企业开发者的一站式大模型开发及服务运行平台。千帆ModelBuilder不仅提供了包括文心一言底层模型和第三方开源…...

特斯拉 FSD 算法深度剖析:软件层面全解读

一、引言 特斯拉的 FSD(Full Self-Driving)系统作为自动驾驶领域的前沿成果,其软件层面的算法设计至关重要。本文将从软件的角度,深入探讨特斯拉 FSD 所采用的算法,包括感知、规划、控制等多个方面,以期为…...

2025/2/17--2/23学习笔记(week1)_C语言

1 整数的存储 只有整数才有原码,反码,补码,原码取反加一(除了符号位)得到补码。补码的补码会变成原码。 在任何位运算里,都是操作的补码,因为整数在内存里都是以补码存储的 2 移位运算符 移位…...

数据结构:二叉树的数组结构以及堆的实现详解

目录 一.树与二叉树 1.树的概念与相关术语: 2.二叉树: (1)定义: (2)特殊的二叉树: (3)完全二叉树 (4)二叉树的存储结构&#x…...

AWS S3 如何设置公开访问权限?

1.让整个bucket都有公开访问权限 1.1关闭【阻止公共读】 1.2关闭ACL访问控制 1.3打开桶策略 这样桶内所有的图片就能访问了 2.只开放特定文件让其具有访问权限? 2.1关闭【阻止公共读】 如之前的图示 2.2打开ACL控制 2.3单个文件打开公共读...

使用TortoiseGit配合BeyondCompare实现在Git仓库中比对二进制文件

使用TortoiseGit的比对工具可以直接右键,点击选择比对和上一版本的变化差异: 但是TortoiseGit只能支持比对纯文本文件的变化差异,如果尝试比对二进制文件,会提示这不是一个有效的文本文件: BeyondCompare可以比对二进制…...

8、HTTP/1.0和HTTP/1.1的区别【高频】

第一个是 长连接: HTTP/1.0 默认 短连接,(它也可以指定 Connection 首部字段的值为 Keep-Alive实现 长连接)而HTTP/1.1 默认支持 长连接,HTTP/1.1是基于 TCP/IP协议的,创建一个TCP连接是需要经过三次握手的…...

Rk3568驱动开发_开发环境的搭建_1

1、环境说明: 需要用官方的程序包,这个程序需要在虚拟机里编译再将镜像烧录到板子里,本质上是给板子上一套Linux操作系统,镜像是.img文件 Linux操作系统被分成了多个模块,编译好后储存在镜像里,本质上就和…...

Solr中得Core和Collection的作用和关系

Solr中得Core和Collection的作用和关系 一, 总结 在Apache Solr中,Core和Collection 是两个核心概念,他们分别用于单机模式和分布式模式(SolrCloud)中,用于管理和组织数据。 二,Core 定义&am…...

Visual Studio Code 远程开发方法

方法1 共享屏幕远程控制,如 to desk, 向日葵 ,像素太差,放弃 方法2 内网穿透 ssh 第二个方法又很麻烦,尤其是对于 windows 电脑,要使用 ssh 还需要额外安装杂七杂八的东西;并且内网穿透服务提供商提供的…...

如何看到 git 上打 tag 的时间

在 Git 中可以通过以下方法查看标签(tag)的创建时间: 使用 git show 命令: 运行以下命令可以查看某个特定标签的详细信息,包括创建时间: git show 输出中会包含 Tagger 的信息和 Date 字段,显示…...

【HarmonyOS Next】鸿蒙TaskPool和Worker详解 (一)

【HarmonyOS Next】鸿蒙TaskPool和Worker详解 (一) 一、TaskPool和Worker如何实现多线程?各自特点是什么? 在鸿蒙中通过TaskPool和Worker实现多线程并发,两者都基于Actor并发模型实现。 Actor并发模型,每…...

如何设置HTTPOnly和Secure Cookie标志?

设置HttpOnly和Secure标志于Cookie中是增强Web应用安全性的重要措施。这两个标志帮助防止跨站脚本攻击(XSS)和中间人攻击(MitM)。下面是关于如何设置这些标志的具体步骤: 设置方法 在服务器端设置 根据你的服务器端…...

几个api

几个api 原型链 可以阅读此文 Function instanceof Object // true Object instanceof Function // true Object.prototype.isPrototypeOf(Function) // true Function.prototype.isPrototypeOf(Object) // true Object.__proto__ Function.prototype // true Function.pro…...

Deepseek本地部署指南:在linux服务器部署,在mac远程web-ui访问

1. 在Linux服务器上部署DeepSeek模型 要在 Linux 上通过 Ollama 安装和使用模型,您可以按照以下步骤进行操作: 步骤 1:安装 Ollama 安装 Ollama: 使用以下命令安装 Ollama: curl -sSfL https://ollama.com/install.s…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...

安卓基础(aar)

重新设置java21的环境,临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的: MyApp/ ├── app/ …...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)&#xff…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来,一直在光谱成像领域深度钻研和发展,始终致力于研发高性能、高可靠性的光谱成像相机,为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...