【小程序】封装网络请求request模块

一、封装request请求

因为我把所有项目中的接口也封装到了一个文件中,所以我建了一个services的文件夹,在下面建了一个request.js

在这个里面做了请求拦截器和响应拦截器,

const apiConfig = require('../config/baseUrl.js');class httpClient {prefixUrl = '';constructor(prefixUrl = '') {this.prefixUrl = prefixUrl}interceptors = {// 请求拦截器request: (params) => {if (params.showLoading) {// TODO: 封装loadingtt.showLoading({"title": "加载中...","mask": true,});}// 处理请求数据,如添加Header信息等,const config = {...params,url: apiConfig.BASE_URL + this.prefixUrl + params.url,header: {...params.header,'Content-type': 'application/json',//TODO: 后端需要的字段 // 'Access-Token': tt.getStorageSync('login.user.xxx')},timeout: 60000, // 超时时长,小程序默认是 1 分钟};if (config.method === 'GET') {config.url += '?' + Object.keys(config.data).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(config.data[key])}`).join('&');}return config;},// 响应拦截器response: (response) => {console.log('response', response)if (response.config.showLoading) {tt.hideLoading();}//TODO: 错误信息处理if (response.data.code && response.data.code !== 0 && response.data.code !== 200) {tt.showToast({title: response.data.message,duration: 2000,icon: "none",mask: false});return Promise.reject(response);}return response.data;}}request(config) {config = this.interceptors.request(config)// 网络请求return new Promise((resolve, reject) => {tt.request({...config,success: (res) => {const mergeRes = Object.assign({}, res, {config})resolve(this.interceptors.response(mergeRes))},fail: (err) => {const mergeErr = Object.assign({}, err, {config})reject(this.interceptors.response(mergeErr))},});});}get(url, data = {}, config = {}, loading = true) {return this.request(Object.assign({ url, data, method: 'GET', showLoading: loading }, config))}post(url, data = {}, config = {}, loading = true) {return this.request(Object.assign({ url, data, method: 'POST', showLoading: loading }, config))}put(url, data = {}, config = {}, loading = true) {return this.request(Object.assign({ url, data, method: 'PUT', showLoading: loading }, config))}delete(url, data = {}, config = {}, loading = true) {return this.request(Object.assign({ url, data, method: 'DELETE', showLoading: loading }, config))}}module.exports = httpClient;

2、封装对应的 api 文件

在service的文件夹下面建了一个api.js【因为目前这个小程序页面比较少,暂定把所有接口写在同一个文件夹下】

const httpClient = require('./request.js');class ApiManager extends httpClient {constructor(){super('/api');}login(data) {return this.post('/login', data);}getData(data, config) {return this.get('/train_types', data, config);}
}module.exports = new ApiManager();

3. 管理所有地址

module.exports = {BASE_URL: 'http://192.168.2.68:1911',
}

4. 使用

	const loginResponse = await ApiManager.login({user_name: 'admin',password:'hsradmin2022'})console.log('loginResponse', loginResponse)const response = await ApiManager.getData({}, {header: {'Access-Token': loginResponse.data.access_token,},});this.setData({list: response.data.list})console.log(response.data);

参考链接
https://www.npmjs.com/package/mina-request?activeTab=code

官方文档
https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/api/network/request

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

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

相关文章

Xcode 16 使用 pod 命令报错解决方案

原文请点击这个跳转 一、问题现象: 有人会遇到 Xcode 升级到 16 后,新建应用然后使用 pod init 命令会报错如下: Stack Ruby : ruby 3.3.5 (2024-09-03 revision ef084cc8f4) [x86_64-darwin23]RubyGems : 3.5.22Host : macOS 15.0 (24A335…

使用 Flask 和 ONLYOFFICE 实现文档在线编辑功能

提示:CSDN 博主测评ONLYOFFICE 文章目录 引言技术栈环境准备安装 ONLYOFFICE 文档服务器获取 API 密钥安装 Flask 和 Requests 创建 Flask 应用项目结构编写 app.py创建模板 templates/index.html 运行应用功能详解文档上传生成编辑器 URL显示编辑器回调处理 安全性…

机器学习——损失函数、代价函数、KL散度

🌺历史文章列表🌺 机器学习——损失函数、代价函数、KL散度机器学习——特征工程、正则化、强化学习机器学习——常见算法汇总机器学习——感知机、MLP、SVM机器学习——KNN机器学习——贝叶斯机器学习——决策树机器学习——随机森林、Bagging、Boostin…

vxe-table 3.10+ 进阶高级用法(一),根据业务需求自定义实现筛选功能

vxe-table 是vue中非常强大的表格的,公司项目中复杂的渲染都是用 vxe-table 的,对于用的排序。筛选之类的都能支持,而且也能任意扩展,非常强大。 默认筛选功能 筛选的普通用法就是给对应的列指定参数: filters&#…

推荐一款好用的postman替代工具2024

Apifox 是国内团队自主研发的 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台,是非常好的一款 postman 替代工具。 它通过一套系统、一份数据,解决多个系统之间的数据同步问题。只要定义好接口文档,接口调试、数据 Mock、接口…

MTSET可溶于DMSO、DMF、THF等有机溶剂,并在水中有轻微的溶解性,91774-25-3

一、基本信息 中文名称:[2-(三甲基铵)乙基]甲硫基磺酸溴;MTSET巯基反应染料 英文名称:MTSET;[2-(Trimethylammonium)ethyl]methanethiosulfonate Bromide CAS号:91774-25-3 分子式:C6H16BrNO2S2 分子量…

如何为电子课程创造创意

为电子课程创造一个想法,首先要深刻理解是什么让知识对学习者既相关又吸引人。第一步是专注于可以分解为可教部分的特定技能或专业领域。通常,人们从他们熟悉的东西开始,但真正的挑战在于将这些知识转化为一种可访问且引人入胜的学习体验。这…

安全生产管理的重要性:现状、痛点与改进之路

当前,安全生产管理已经成为企业管理中的关键环节,但现实中仍然存在诸多痛点。近年来,随着工业化和现代化的快速推进,企业在追求效益的同时,忽视安全管理的现象屡见不鲜。据统计,安全事故的发生频率仍然较高…

深度学习之 LSTM

1.1 LSTM的产生原因 ​ RNN在处理长期依赖(时间序列上距离较远的节点)时会遇到巨大的困难,因为计算距离较远的节点之间的联系时会涉及雅可比矩阵的多次相乘,会造成梯度消失或者梯度膨胀的现象。为了解决该问题,研究人…

机器学习基础02_特征工程

目录 一、概念 二、API 三、DictVectorize字典列表特征提取 四、CountVectorize文本特征提取 五、TF-IDF文本1特征词的重要程度特征提取 六、无量纲化预处理 1、MinMaxScaler 归一化 2、StandardScaler 标准化 七、特征降维 1、特征选择 VarianceThreshold 底方差…

Linux第四讲:Git gdb

Linux第四讲:Git && gdb 1.版本控制器Git1.1理解版本控制1.2理解协作开发1.3Git的历史1.4Git的操作1.4.1仓库创建解释、仓库克隆操作1.4.2本地文件操作三板斧1.4.3文件推送详细问题 2.调试器 -- gdb/cgdb使用2.1调试的本质是什么2.2watch命令2.3set var命令…

react的创建与书写

一:创建项目 超全面详细一条龙教程!从零搭建React项目全家桶(上篇) - 知乎 1.创建一个文件夹,shift鼠标右键选择在此处打开powershell 2.为了加速npm下载速度,先把npm设置为淘宝镜像地址。 npm config s…

黄色校正电容102j100

1. 普通电容主要用于交流回路中的信号耦合或滤波。它们通常没有极性,容量较小,通常在几百皮法拉范围内。普通电容在电路中用于信号耦合或直流电路的电源滤波,而电解电容一般用于直流电路,容量较大,从几微法到数千微法…

DApp开发:定制化解决方案与源码部署的一站式指南

去中心化应用(DApp)随着区块链技术的发展,成为众多行业探索与创新的重要方向。无论是金融、供应链、游戏,还是社交和艺术市场,DApp都为传统业务模式带来了全新可能。然而,开发一款DApp并非易事,…

单元测试、集成测试、系统测试有什么区别

🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 单元测试、集成测试、系统测试有什么区别 1、粒度不同 集成测试bai粒度居中,单元测试粒度最小,系统du测试粒度最大。 2、测试方式不同…

学Linux的第八天

目录 管理进程 概念 程序、进程、线程 进程分类 查看进程 ps命令 unix 风格 bsd风格 GNU风格 top命令 格式 统计信息区 进程信息区:显示了每个进程的运行状态 kill命令 作用 格式 管理进程 概念 程序、进程、线程 程序: 二进制文件&…

Xshell,Shell的相关介绍与Linux中的权限问题

目录 XShell的介绍 Shell的运行原理 Linux当中的权限问题 Linux权限的概念 Linux权限管理 文件访问者的分类(人) 文件类型和访问权限(事物属性) 文件权限值的表示方法 文件访问权限的相关设置方法 如何改变文件的访问权…

RS®SZM 倍频器

_XLT_ R&SSZM 倍频器 R&SSZM 系列倍频器在 50 GHz 至 170 GHz 的频率范围内具有简便的操作性和精确的输出电平。它们可用于多种应用,例如在汽车领域使用测距雷达,在天文学中使用精密望远镜,在雷达干涉测量中用于分析地球表面。 特…

Unity3D学习FPS游戏(11)敌人AI巡逻(NavMesh)

前言:前面两篇博客已经实现了简单的敌人,但是呢,这样很无趣。因为敌人只会站在原地被攻击,所以本篇我们将实现敌人AI巡逻,让敌人动起来。 敌人AI巡逻 场景丰富一下导航网格NavMesh构建导航网格导航网格优化玩家被当作…

去地面算法——depth_clustering算法调试(1)

1 源码下载 论文: 《2016-Fast Range Image-Based Segmentation of Sparse 3D Laser Scans for Online Operation》 《2017-Efficient Online Segmentation for Sparse 3D Laser Scans》 代码:git链接 2 问题记录 2.1 无法找到qt问题 问题截图&…