【uni-app+Vue3】 API请求封装:让接口调用更便捷

前言:uni-app是一款基于Vue.js框架的跨平台开发工具,可以将代码编译成H5、小程序、App等不同平台的应用。在进行uni-app开发时,网络请求是必不可少的环节。为了方便开发,我们可以封装一些网络请求方法,以便在多个页面中复用,并且可以统一处理错误信息等问题,提高开发效率和代码质量。本文将介绍如何封装网络请求方法。

🌈🌈文章目录

一、封装 uni.request 请求

二、封装对应的 api 文件

三、在相关页面使用封装的api

总结

一、封装 uni.request 请求

在根目录创建 until 目录,在目录下创建 request.js 文件,编写以下代码

// 全局请求封装
const base_url = 'http://localhost:996'
// 需要修改token,和根据实际修改请求头
export default (params) => {let url = params.url;let method = params.method || "get";let data = params.data || {};let header = {}if (method == "post") {header = {'Content-Type': 'application/json'};}// 获取本地tokenif (uni.getStorageSync("token")) {header['Authorization'] = 'Bearer ' + uni.getStorageSync("token");}return new Promise((resolve, reject) => {uni.request({url: base_url + url,method: method,header: header,data: data,success(response) {const res = response// 根据返回的状态码做出对应的操作//获取成功console.log(res.statusCode);if (res.statusCode == 200) {resolve(res.data);} else {uni.clearStorageSync()switch (res.statusCode) {case 401:uni.showModal({title: "提示",content: "请登录",showCancel: false,success(res) {setTimeout(() => {uni.navigateTo({url: "/pages/login/index",})}, 1000);},});break;case 404:uni.showToast({title: '请求地址不存在...',duration: 2000,})break;default:uni.showToast({title: '请重试...',duration: 2000,})break;}}},fail(err) {console.log(err)if (err.errMsg.indexOf('request:fail') !== -1) {wx.showToast({title: '网络异常',icon: "error",duration: 2000})} else {wx.showToast({title: '未知异常',duration: 2000})}reject(err);},complete() {// 不管成功还是失败都会执行uni.hideLoading();uni.hideToast();}});}).catch((e) => {});
};

二、封装对应的 api 文件

在实际项目中,我们也会根据上述请求,封装对应的 api ,所以,我们在根目录下创建 api ,里面放与项目相关的 api

// 引入 request 文件
import request from '@/utils/request'// 以下 api 为博主项目示例,实际与项目相匹配// 分页查询学习列表
export const pageStudyInfo = (params) => {return request({url: '/study/studyInfo/page',method: 'get',data: params})
}
// 查询学习列表
export const listStudyInfo = (params) => {return request({url: '/study/studyInfo/list',method: 'get',data: params})
}// 获取学习列表详细信息
export const studyInfoById= (id) => {return request({url: '/study/studyInfo/'+id,method: 'get',})
}// 增加学习列表
export const saveStudyInfo = (params) => {return request({url: '/study/studyInfo',method: 'post',data: params})
}// 修改学习列表
export const updateStudyInfo = (params) => {return request({url: '/study/studyInfo',method: 'put',data: params})
}// 删除学习列表
export const deleteStudyInfo = (id) => {return request({url: '/study/studyInfo/delete?id='+id,method: 'delete',})
}

三、在相关页面使用封装的api

以 Vue3 为例

<script setup>// 在页面中导入相关 api import {pageStudyInfo,listStudyInfo} from "@/api/study/info";// 定义存储请求的结果const studyList = ref([]);// 也买你加载完毕执行onMounted(() => {// 调用函数getStudyList();})// 封装函数,调用 apiconst getStudyList = async () => {let res = await pageStudyInfo(queryParams);console.log(res.data.records);studyList.value = res.data.records;}
</script>

总结

  • 封装请求是指在传输层或应用层对请求数据进行包装,以便在网络中传输和处理。封装请求的好处在于提高数据的安全性、减少网络传输的开销、方便协议的扩展和升级等。
  • 在封装请求时,需要考虑请求的类型、格式、大小、传输协议、加密方式等因素。常见的封装请求的方式有URL编码、JSON格式、XML格式、HTTP协议等。
  • 总之,封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求,可以保证数据的安全和可靠性,从而提高应用的性能和用户体验。

好了,本文就到这里吧,点个关注再走嘛~ 

🚀 个人简介:7年开发经验,某大型国企前端负责人,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端相关技术与工作常见问题~
💟 作    者:前端菜鸟的自我修养❣️
📝 专    栏:uniApp与微信小程序
🌈 若有帮助,还请 关注➕点赞➕收藏  ,不行的话我再努努力💪💪💪  

 更多专栏订阅推荐:

👍 前端工程搭建
💕 vue从基础到起飞

📝 javascript深入研究

✍️ GIS地图与大数据可视化

✈️ 前端常见问题与避坑指南

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/44058.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

About CAT7验证——CLASS F或者Fa测试FLUKE解决方案

七类CLASS F线缆认证测试标准在TIA的标准数据库中是直接跳过&#xff0c;取而代之的是八类的通道测试标准&#xff0c;真正认证七类测试的是在ISO标准数据库中&#xff0c;找到ISO11801 CHANNEL CLASS F或者FA&#xff0c;这就是标准的七类测试标准&#xff0c;测试频率需要达到…

Llama2 入门案例教学

Llama2 是一个基于 Python 的机器学习框架&#xff0c;旨在帮助开发者快速构建和部署机器学习模型。下面是 Llama2 的入门案例教程&#xff0c;旨在帮助您快速上手 Llama2。 安装 Llama2 首先&#xff0c;您需要安装 Llama2。可以使用 pip 安装&#xff1a; pip install lla…

一些学习网站分享

一些学习网站分享&#xff1a; ✅力扣(LeetCode) 力扣 (LeetCode) 官网 - 全球极客挚爱的技术成长平台 力扣是一个刷题站&#xff0c;支持C&#xff0c;Java&#xff0c;Python等多种编程语言&#xff0c;并按难度分为简单、中等、困难三个等级。是真的能刷到大厂真题 ✅Gith…

文本引导I2I迈向统一!北大王选所提出FCDiffusion:端到端适用于各种图像转换任务

文章链接&#xff1a;https://arxiv.org/pdf/2407.03006 github地址&#xff1a;https://github.com/XiangGao1102/FCDiffusion 最近&#xff0c;大规模的文本到图像(T2I)扩散模型在图像到图像(I2I)转换中展现出强大的能力&#xff0c;允许通过用户提供的文本提示进行开放域的图…

智能汽车网络安全笔记

汽车五大域 动力底盘、车身控制、智能座舱、智能网联和高级辅助驾驶五大域 国外汽车安全法规标准 汽车网络安全管理体系&#xff08;CSMS&#xff09; CSMS指的是管理汽车的网络威胁和风险&#xff0c;并保护车辆免受网络攻击的组织过程和管理系统 安全验证和安全测试 8…

安全保障措施

安全保障措施 项目的安全针对系统整体的安全设计提出有效的解决方案&#xff0c;确保系统安全接入&#xff0c;根据项目的特点&#xff0c;以及在网络运行中的安全进行分析&#xff0c;具体包含以下几个方面&#xff1a; 1、重要基础数据信息&#xff0c;比如涉及国家安全的数…

华为机考真题 -- 提取字符串中的最长合法简单数学表达式

题目描述: 提取字符串中的最长合法简单数学表达式,字符串长度最长的,并计算表达式的值。如果没有,则返回 0 。 简单数学表达式只能包含以下内容: 0-9数字,符号+-* 说明: 1、所有数字,计算结果都不超过long 2、如果有多个长度一样的,请返回第一个表达式的结果 3、数…

使用Vue实现前后端分离 spring框架返回json数据中文乱码

SpringBoot返回的中文显示???的问题_spring boot response 中文????-CSDN博客 引入js的script标签到底是放在head还是body中_html页面中用<script>标签引入js代码,该标签放在<head>标签中和放在<body>标签-CSDN博客 vue.js 的问答 - SegmentFault 思…

gyp ERR! stack import sys; print “%s.%s.%s“ % sys.version_info[:3];

这个错误信息是由node-gyp在尝试构建一个Node.js原生模块时发出的。它通常表示node-gyp工具无法正确安装或配置本地依赖。 错误解释&#xff1a; gyp ERR! stack 表示错误栈的开始。 import sys; print “%s.%s.%s” % sys.version_info[:3]; 是Python代码&#xff0c;用于打…

WritableStream()写入流,将数字或字符流,写入你需要的地方

WritableStream有两个对象参数&#xff1a; 第一个必选&#xff0c;用于配置一些写入流时的钩子&#xff1b; 第二个可选&#xff0c;用于配置一些chunk入队和队列控制的策略&#xff1b; 第二个参数的策略&#xff08;利用ByteLengthQueuingStrategy【按字节计量】和CountQueu…

gpt讲 Observable 对象

什么是 Observable&#xff1f; Observable 是一种用于处理异步数据流的数据类型。它可以发出多个值&#xff0c;这些值可以是同步或者异步产生的&#xff0c;并且可以在时间上发生变化。在 Angular 中&#xff0c;HttpClient 返回的响应对象、事件流以及许多其他异步任务都可…

网络服务器都包含哪些方面需要维护?

网络服务器是现代互联网架构中不可或缺的一部分&#xff0c;它们承载着数据存储、处理和传输的重要任务。为了确保服务器能够稳定、高效地运行&#xff0c;定期的维护工作显得尤为重要。下面将介绍一些常见的网络服务器维护方法&#xff1a; 定期更新软件和系统 保持操作系统和…

QGraphicsScene::itemAt和QGraphicsView::itemAt无法返回Item

坐标点确定是没问题的&#xff0c;就是item所在的位置 看源码&#xff0c;基于5.9.7 Src\qtbase\src\widgets\graphicsview\qgraphicsview.cpp QGraphicsItem *QGraphicsView::itemAt(const QPoint &pos) const {Q_D(const QGraphicsView);if (!d->scene)return 0;con…

ChatTTS使用

ChatTTS是一款适用于日常对话的生成式语音模型。 克隆仓库 git clone https://github.com/2noise/ChatTTS cd ChatTTS 使用 conda 安装 conda create -n chattts conda activate chattts pip install -r requirements.txt 安装完成后运行 下载模型并运行 python exampl…

Python面试题:请编写一个函数,计算一个字符串中每个字符的出现频率

当然&#xff0c;可以通过使用 Python 编写一个函数来计算字符串中每个字符的出现频率。下面是一个示例函数&#xff1a; def char_frequency(s):"""计算字符串中每个字符的出现频率参数:s (str): 输入字符串返回:dict: 一个字典&#xff0c;其中键是字符&…

java中方法的使用

方法的使用 方法的概念什么是方法方法定义方法的调用过程实参和形参的关系 方法重载为什么需要方法重载方法重载的概念方法签名 递归递归的概念递归过程分析递归练习 方法的概念 什么是方法 方法就是一个代码片段&#xff0c;类似于C语言的函数。 方法存在的意义&#xff1a;…

算法金 | 12 个最佳 Python 代码片段,帮我完成工作自动化,香~

​大侠幸会幸会&#xff0c;我是日更万日 算法金&#xff1b;0 基础跨行转算法&#xff0c;国内外多个算法比赛 Top&#xff1b;放弃 BAT Offer&#xff0c;成功上岸 AI 研究院 Leader&#xff1b; Python是一种多功能的编程语言&#xff0c;它提供了各种功能和库来有效地自动化…

Centos7 被停用!如何利用 Ora2Pg 将 Oracle 迁移至 IvorySQL?

在过去的社区讨论中&#xff0c;想要使用或正在使用IvorySQL的社区用户&#xff0c;经常问到Oracle 如何迁移到 IvorySQL 中&#xff0c;而且近期随着 Centos7 官方已经停止维护&#xff0c;这一变动促使了很多将 Oracle 部署在 Centos7 上的 Oracle 用户&#xff0c;开始准备 …

DangerWind-RPC-framework---二、动态代理

RPC调用需要达到的效果是&#xff0c;远程调用某方法就像本地调用一样&#xff0c;以下列代码为例&#xff1a; Component public class HelloController {RpcReference(version "version1", group "test1")private HelloService helloService;public v…

树莓派采集系统

树莓派&#xff08;Raspberry Pi&#xff09;是一款非常受欢迎的小型单板计算机&#xff0c;因其低成本、低功耗以及丰富的I/O接口&#xff0c;非常适合用来搭建数据采集系统。无论是环境监测、智能家居、工业自动化&#xff0c;还是科学实验&#xff0c;树莓派都能胜任。以下是…