uni-app 封装api请求

前端封装api请求

前端封装 API 请求可以提高代码的可维护性和重用性,同时使得 API 调用更加简洁和易用。

下面是一种常见的前端封装 API 请求的方式:

  1. 创建一个 API 封装模块或类:可以使用 JavaScript 或 TypeScript 创建一个独立的模块或类来封装 API 请求。这个模块或类可以包含一些常用的方法,例如 getpost 等,用于发送不同类型的请求。

  2. 配置基本信息:在封装模块中,设置 API 的基本信息,例如 API 的根地址、请求头等。可以定义一些默认配置,也可以允许开发者在调用时传入自定义配置。

  3. 实现请求方法:根据需要,实现不同的请求方法,例如 getpostputdelete 等。这些方法通常接收参数(例如 URL、数据、请求头等),并返回一个 Promise 对象,以便在异步请求完成后获取数据或处理错误。

  4. 处理请求和响应拦截:在请求发送前,可以对请求进行一些预处理,例如添加统一的请求头、身份验证等。在响应返回后,也可以对响应进行拦截和处理,例如判断状态码、处理错误信息等。

  5. 错误处理:在封装的 API 模块中,可以统一处理请求错误。例如,对于网络错误或服务器返回的错误信息,可以进行统一的处理,并根据需要进行提示或记录操作。

  6. 使用封装的 API 模块:在项目中使用封装的 API 模块进行 API 请求。通过调用封装模块中的方法,传入请求所需的参数,即可发送请求并获取响应数据。

这种方式的好处是,在项目中可以复用封装好的 API 请求逻辑,减少代码的冗余,并且使得 API 调用的代码更加清晰和易读。

此外,对于底层的网络请求库,也可以根据需要进行切换和替换,而不需要修改大量的业务代码。

更多详细内容,请微信搜索“前端爱好者戳我 查看

uni-app 封装api请求

在uni-app中封装API请求可以按照以下步骤进行:

  • 创建一个utils文件夹,并在其中创建一个api.js文件,用于存放API请求相关的代码。

  • api.js文件中,引入uni.request方法用于发送请求。示例代码如下:

export function request(url, method, data) {return new Promise((resolve, reject) => {uni.request({url: url,method: method,data: data,success: (res) => {resolve(res.data);},fail: (err) => {reject(err);}});});
}

这里使用了Promise对象来处理异步请求,方便后续的使用和处理。

  • api.js文件中,定义具体的API请求函数。示例代码如下:
import { request } from './utils/api';export function login(username, password) {const url = 'https://api.example.com/login';const method = 'POST';const data = {username: username,password: password};return request(url, method, data);
}export function getUserInfo(userId) {const url = `https://api.example.com/users/${userId}`;const method = 'GET';return request(url, method);
}

以上示例代码中包括了登录和获取用户信息两个API请求函数。根据具体的需求,你可以进行修改或添加其他的API请求函数。

  • 在需要使用API的页面或组件中引入并调用定义的API请求函数即可。示例代码如下:
import { login, getUserInfo } from './utils/api';login('example', 'password').then((res) => {console.log('登录成功', res);
}).catch((err) => {console.error('登录失败', err);
});getUserInfo(123).then((res) => {console.log('获取用户信息成功', res);
}).catch((err) => {console.error('获取用户信息失败', err);
});

以上示例代码展示了如何使用封装的API请求函数来进行登录和获取用户信息的操作。根据具体需求,你可以在相应的页面或组件中调用相关API请求函数。

通过以上步骤,你就可以在uni-app中封装API请求,使代码结构更加清晰和可维护。记得根据实际情况进行适当的错误处理和数据处理。

uni-app封装api请求改进

// @/utils/request.js
// #ifdef MP-WEIXIN
const baseURL = "https://www.bradenhan.tech"
// #endif 
// #ifdef H5
const baseURL = ""
// #endifconst timeout = 5000// 封装api请求
const request = function(option){ // 获取用户传入的urlvar url = baseURL + option.url; // 添加提请求头var  header = option.header||{}if(!!option.needToken){// 添加token header.Authorization =  'Bearer ' +  uni.getStorageSync('token');  }header.source=1;header.channel="h5";// 加载提示var loading = option.loading;// 如果有loading就显示loadingif(loading){uni.showLoading(loading)}// 返回一个promisereturn new Promise((resolve,reject)=>{  // 发起一个request请求uni.request({url, //请求urlmethod:option.method||"GET", //请求方法header, //请求头timeout,data:option.data||option.params, //请求数据success(res){// 成功返回结果if(res.statusCode===200){resolve(res.data)// 如果是101 没有权限if(res.data.code==101){uni.showToast({title: res.data.msg,icon:'none'})uni.redirectTo({url: '/pages/login/index',})}if(res.data.code!=200&&res.data.code!=0){uni.showToast({icon:'none',title:res.data.msg||'请求错误'})}} },fail(err){// 失败返回失败结果uni.showToast({title: '请求失败',icon:'error'})console.error(err);reject(err)},complete(){// 完成 关闭loadingif(loading){uni.hideLoading()}}})})
}// 定义get简洁方法
request.get=function(url,config){return  request({url,method:"GET",...config})
}// 定义post简洁方法
request.post=function(url,data,config){return  request({url,method:"POST",		...config,data})
}
// 导出请求
export default request;

统一控制api.js

request.post(url,data,needToken)

参数:

  • url 请求url
  • data 请求参数data
  • needToken 是否需要参数
// @/api/index.jsimport request from '@/utils/request.js' // 用户注册
export function customUseRegister(data){return request.post("/xxxx1",data)
}// 微信用户登录
export function customUserLogin(data){return request.post("/xxxx2",data)
} // 更新用户信息 -- 需要使用Token
export function customUserUpdate(data){return request.post("/xxxx3",data,{needToken: true})
}

组件中使用

import { customUserLogin, customUseRegister,customUserUpdate } from '@/api/index.js'customUserUpdate(data).then((res) => {console.log('成功', res);  
}).catch((err) => { console.error('登录失败', err);
});

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

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

相关文章

VoxWeekly|The Sandbox 生态周报|20230731

欢迎来到由 The Sandbox 发布的《VoxWeekly》。我们会在每周发布,对上一周 The Sandbox 生态系统所发生的事情进行总结。 如果你喜欢我们内容,欢迎与朋友和家人分享。请订阅我们的 Medium 、关注我们的 Twitter,并加入 Discord 社区&#xf…

架构实践方法

一、识别复杂度 将主要的复杂度问题列出来,然后根据业务、技术、团队等综合情况进行排序,优先解决当前面临的最主要的复杂度问题。对于按照复杂度优先级解决的方式,存在一个普遍的担忧:如果按照优先级来解决复杂度,可…

【MATLAB第68期】基于MATLAB的LSTM长短期记忆网络多变量时间序列数据多步预测含预测未来(非单步预测)

【MATLAB第68期】基于MATLAB的LSTM长短期记忆网络多变量时间序列数据多步预测含预测未来(非单步预测) 输入前25个时间,输出后5个时间 一、数据转换 1、原始数据 5列时间序列数据,70行样本 705 数据矩阵结构 2、数据转换 将…

利用awk筛选给定时间范围内的日志

时间戳 什么是时间戳? ​ 时间戳是指格林威治时间自1970年1月1日(00:00:00 GMT)至当前时间的总秒数。它也被称为Unix时间戳(Unix Timestamp)。通俗的讲,时间戳是一份能够表示一份数据在一个特定时间点已经存…

【数据分析专栏之Python篇】五、pandas数据结构之Series

前言 大家好!本期跟大家分享的知识是 Pandas 数据结构—Series。 一、Series的创建 Series 是一种类似于一维数组的对象,由下面两部分组成: values:一组数据,ndarray 类型index:数据索引 顾名思义&…

STM32——STM32F401x系列标准库的下载+环境搭建+建工程步骤(更完整)

文章目录 标准库的下载环境搭建建工程最后的话 标准库的下载 1.STM32标准库的官网下载网站https://www.st.com/content/st_com/en.html 2. 3. 4. 5. 6. 7.点击之后下滑 8.选择自己需要的版本下载 环境搭建建工程 大致步骤同之前我写的一篇STM32——建工程差不多&#xff0…

Vue 本地应用 记事本 v-on v-model v-for使用

vue当中如何生成列表结构?使用的指令是v-for,同时要有一个可以生成列表的数据,常用的是数组。记事本里面的内容并不复杂,所以这里使用字符串数组就行了。 获取用户输入的内容使用绑定v-model,双向数据绑定&#xff08…

【IMX6ULL驱动开发学习】02.hello驱动程序之cdev注册字符设备驱动程序和设置次设备号

目录 ​编辑 一、register_chrdev 二、解决方法 2.1 alloc_chrdev_region函数:注册一系列字符设备编号 2.2 cdev_init函数:初始化cdev结构体 2.3 cdev_add函数:将字符设备添加到系统中 三、驱动程序 一、register_chrdev major reg…

NAND Flash 失效之 Data Rentention | 闪存数据保持力 | 数据放几年就坏掉了?

依公知及经验整理,原创保护,禁止转载。专栏 《深入理解Flash:闪存特性与实践》 图1: Data Retention 对 Vt 电压分布影响 图片来源: 知乎 [2] 全文 1900 字, 内容摘要 Data Retention 产生 Data Retention 的影响因素  如何规避 Data Rention 问题 发生Data Retent…

MyCat分片规则——应用指定分片规则、日期分片、固定分片hash算法

1.应用指定分片规则 2.固定分片hash算法 3.字符串hash解析 4.按天(日期)分片 5.按自然月进行分片

Django入门 - Http协议前后端交互

Http协议前后端交互 在前后端交互当中,前端后端用的协议是http协议 先请求后响应,响应完之后连接就会断开我们可以认为它其实是一个短连接 或者 无连接。在它内部其实是基于TCP协议的,它也会有三次握手,但是这是内部的&#xff…

[oeasy]python0081_[趣味拓展]ESC键进化历史_键盘演化过程_ANSI_控制序列_转义序列_CSI

光标位置 回忆上次内容 上次了解了 新的转义模式 \033 逃逸控制字符 escape 这个字符 让字符串 退出标准输出流进行控制信息的设置 可以设置 光标输出的位置 ASR33中的ALT MODE 是 今天的ESC键吗????🤔 查询文档…

开源语言模型的历史和重要性;Edge浏览器将推出Bing AI重写文本功能

🦉 AI新闻 🚀 微软即将推出桌面版Microsoft Edge浏览器的Bing AI重写文本功能 摘要:微软最近在桌面版Microsoft Edge浏览器中引入了一个新功能,允许用户使用Bing AI重写文本。用户可以选择不同的语气、格式和长度,然…

安全杂记 - Linux文本三剑客之awk

目录 1.什么是AWK2.正则表达式3.语法4.内置变量示例printf命令5.复现awk经典实例(1).插入几个新字段(2).格式化空白(3).筛选IPv4地址(4).筛选给定时间范围内的日志 1.什么是AWK awk、grep、sed是linux操作文本的三大利器,合称文本三剑客。三者的功能都是处理文本&a…

一百四十三、Linux——Linux的CentOS 7系统语言由中文改成英文

一、目的 之前安装CentOS 7系统的时候把语言设置成中文,结果Linux文件夹命名出现中文乱码的问题,于是决定把Linux系统语言由中文改成英文 二、实施步骤 (一)到etc目录下,找到配置文件locale.conf # cd /etc/ # ls…

Python自动化测试用例:如何优雅的完成Json格式数据断言

目录 前言 直接使用 优化 封装 小结 进阶 总结 资料获取方法 前言 记录Json断言在工作中的应用进阶。 直接使用 很早以前写过一篇博客,记录当时获取一个多级json中指定key的数据: #! /usr/bin/python # coding:utf-8 """ aut…

399. 除法求值

题目描述&#xff1a; 主要思路&#xff1a; 本题主要利用并查集的思想&#xff0c;重点是要弄明白分子和分母的指向关系以及一系列的值的变化规则。 查询时如果两个数字不在一个集合里那么结果就为-1. class Solution { public:unordered_map<string,string> f;unorde…

MongoDB创建用户 、数据库、索引等基础操作

MongoDB的权限认证是相对来说比较复杂的&#xff0c;不同的库创建后需要创建用户来管理。 本机中的MongoDB是docker 启动的&#xff0c;所以先进入docker的镜像中 docker exec -it mongodb bash 这样就进入到了镜像MongoDB中&#xff0c;然后输入命令连接MongoDB数据库 注…

【Spring】实现FactoryBean接口

FactoryBean FactoryBean是一个接口&#xff0c;需要创建一个类来实现该接口&#xff0c;该接口中有三个方法&#xff0c;通过重写其中的两个方法&#xff0c;获得一个对象&#xff0c;三个方法分别是&#xff1a; 1.getObject():通过一个对象交给IOC容器管理2.getObjectType(…

亿欧智库:2023中国宠物行业新趋势洞察报告(附下载)

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 户外赛道本质上迎合了全球共性需求的增长&#xff0c;从养宠意愿的转化到养宠生活的需求&#xff0c;多层次的需求推动行业发展新趋势 从需求端进行分析&#xff0c;可以将养宠意愿的转化分为三个层…