uniapp微信小程序-请求二次封装(直接可用)

一、请求封装优点

  • 代码重用性:通过封装请求,你可以在整个项目中重用相同的请求逻辑。这样一来,如果 API 发生变化或者需要进行优化,你只需在一个地方修改代码,而不是在每个使用这个请求的地方都进行修改。

  • 可维护性:封装请求使代码更易维护。所有的请求逻辑都集中在一个地方,降低了维护成本。当需要添加新的功能、处理错误或者进行性能优化时,只需修改封装的请求逻辑而无需深入到每个组件或页面中。

  • 错误处理:封装的请求可以统一处理错误,提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误,例如网络错误、权限问题等,使代码更加健壮。

  • 统一配置:通过封装,可以在一个地方统一配置请求的一些参数,例如基本路径、请求超时时间、请求头等。这简化了全局配置的管理。

  • 请求拦截器:使用请求拦截器可以在发送请求前进行一些操作,比如添加认证信息、加载 loading 状态等。这提高了代码的灵活性和可扩展性。

  • 响应拦截器:响应拦截器可以在处理响应数据前进行一些操作,例如统一处理后端返回的错误码、格式化数据等。这样可以在前端层面统一处理后端的响应规范。

  • 业务逻辑分离:通过封装请求,你可以将业务逻辑和数据获取逻辑分离开来。组件或页面只需关注业务逻辑,而不用关心具体的请求细节,使代码更加清晰。

二、之前代码的封装 

const  config_url= "";这里写你的域名
const request = (url, data = {}, method = 'GET') => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: config_url + url,
			data: data,
			method: method,
			header: {
				'X-Requested-With': 'XMLHttpRequest',
				"Accept": "application/json",
				"Content-Type": 'application/json',
			},
			dataType: 'json',
			success: (res) => {
				const responseData = interceptor(res.data);
				if (responseData.code === 200 || responseData.code === 500 ||responseData
					.code === 4025) {
					resolve(responseData);
				} else {
					throwErr(res)
					reject(res);
				}
			},
			fail: function(err) {
				reject(err)
			}
		})
	});
};

// GET 请求封装
const get = (url, data) => {
	return request(url, data, 'GET');
};

// POST 请求封装
const post = (url, data) => {
	return request(url, data, 'POST');
};
// PUT 请求封装
const put = (url, data) => {
	return request(url, data, 'PUT');
};

// DELETE 请求封装
const del = (url, data) => {
	return request(url, data, 'DELETE');
};

// 请求拦截
function interceptor(response) {
	if (response.code === -2) {
		uni.showToast({
			title: response.msg,
			icon: 'none',
			duration: 2000,
			complete: () => {
				uni.reLaunch({
					url: '/pages/index/index',
				});
			},
		});
		return false;
	}
	return response;
}

// 处理错误
function throwErr(res) {
	if (res.code == 500) {
		uni.showToast({
			title: res.msg,
		})
	}
}

export {
	get,
	post,
	put,
	del
}

 1.main.js注册一下

import App from './App'
import uView from '@/node_modules/uview-ui'
import * as request from '@/api/request';
	// import Lame from 'lamejs'
Vue.use(uView)
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
import store from "./store/index.js"
Vue.config.productionTip = false
Vue.prototype.$store = store
//这里注册一下就好
Vue.prototype.$request = request;
App.mpType = 'app'
const app = new Vue({
	store,
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	return {
		app
	}
}
// #endif

2.使用请求 

this.$request.post("/sz"这里是路径, {
						这里写携带参数
					}, ).then((res) => {
                        这里写成功之后的
					}, (err) => {
                        这里处理失败之后的
					})

总结:之前的比较拉不好用也可以用,api没写在一块

三、使用uview2.0的请求封装 (Http请求 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com))

1.前置条件

安装了uview组件库,才能操作下来的操作

2.首先建两个文件夹存放封装的请求和二次封装的api,代码会放在下面直接用就行

a.  request.js
// 此vm参数为页面的实例,可以通过它引用vuex中的变量
module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
        config.baseURL = 'https://httpbin.org'; /* 根域名 */
        return config
    })
	
	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
	    // 初始化请求拦截器时,会执行此方法,此时data为undefined,赋予默认{}
	    return config 
	}, config => { // 可使用async await 做异步操作
	    return Promise.reject(config)
	})
	
	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
		const data = response.data

		return data === undefined ? {} : data
	}, (response) => { 
		// 对响应错误做点什么 (statusCode !== 200)
		return Promise.reject(response)
	})
}
b.   api.js
const http = uni.$u.http

// post请求,获取菜单
export const postMenu = (data) => http.post('/post', data)
c.    main.js(把那个request.js引用一下)
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App,
  
})
require('@/pages/utils/request.js')(app)
app.$mount()
// #endif

 d.  使用的话
postMenu({
				usename: "lijiang",
				password: "123"
			}).then(res => {
				console.log(res, res);
			})

四、接口调试工具(Postman VS Apifox | Apifox 比 Postman 更适合中国开发者)


个人觉得挺好用的你先看下接口能用吗,前面找的接口不能用害我找了很长时间原因

五、接口找的这个博主的感谢get/post在线接口_在线接口请求-CSDN博客 

代码直接可用完结,大佬勿喷,有什么问题可私信

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

P8651 [蓝桥杯 2017 省 B] 日期问题

#include <iostream> #include <string> using namespace std;int first; int second; int third; int day[13]{0,31,0,31,30,31,30,31,31,30,31,30,31};//每月日期bool select (int i,int j,int k){if ((i%100 first) && (j second) && (k thi…

Spring Cloud + Vue前后端分离-第13章 网站开发

源代码在GitHub - 629y/course: Spring Cloud Vue前后端分离-在线课程 Spring Cloud Vue前后端分离-第13章 网站开发 13-1 网站模块的搭建 新建web模板 1.网站开发&#xff0c;增加web模块&#xff0c;使用命令&#xff1a;vue create web vue版本4.2.3 大家拿到一个v…

第七篇【传奇开心果短博文系列】Python的OpenCV库技术点案例示例:图像拼接和融合

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例短博文系列 短博文目录一、前言二、OpenCV图像拼接融合介绍三、全景图像拼接示例代码和扩展四、图像融合示例代码和扩展五、归纳总结 系列短博文目录 Python的OpenCV库技术点案例示例短博文系列 短博文目录…

el-table 设置内容超出宽度后省略,并添加tooltip

el-table 设置内容超出宽度后省略&#xff0c;并添加tooltip 只需要在el-table-item 标签中添加属性 :show-overflow-tooltip"true" 例子 <template><div style"width:100%; display: flex; justify-content: center;"><el-table :data&…

零基础学习数学建模——(五)美赛写作指导

本篇博客将详细讲解美赛论文写作。 文章目录 标题摘要目录引言问题背景问题重述前人研究我们的工作 模型假设及符号说明正文问题分析模型建立模型求解结果分析模型检验 模型优缺点及展望模型优缺点模型展望 参考文献及附录参考文献附录 2024年美赛论文新要求 标题 标题要简洁…

探索 SOAP:揭开 Web 服务的神秘面纱(上)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

vscode配置扩展

1、微软提供的C/C扩展开发包 2、C/C智能提示 3、提供as汇编的语法高亮 4、提供文件夹和文件的显示主题 5、提供链接脚本的语法高亮 6、十六进制编辑器 7、MakeFile工具

Bug: git stash恢复误drop的提交

Bug: git stash恢复误drop的提交 前几天在写ut时突然需要通过本地代码临时出一个包&#xff0c;但是本地ut又不想直接作为一个commit提交&#xff0c;所以为了省事就将ut的代码暂时stash起来。出完包后想apply stash&#xff0c;但是手误操作点成了drop stash&#xff0c;丢失了…

Adobe ColdFusion 反序列化漏洞复现(CVE-2023-38203)

0x01 产品简介 Adobe ColdFusion是美国奥多比(Adobe)公司的一套快速应用程序开发平台。该平台包括集成开发环境和脚本语言。 0x02 漏洞概述 Adobe ColdFusion存在代码问题漏洞,该漏洞源于受到不受信任数据反序列化漏洞的影响,攻击者通过漏洞可以代码执行,可导致服务器失…

五个工业安全物联网解决方案

新一代物联网工具和应用正在帮助改变工业安全现状。传感器、可穿戴设备和位置标签提供实时数据&#xff0c;可以防止发生事故&#xff0c;并在出现故障时极大地缩短响应时间。 工业工作场所需要更加安全。根据国际劳工组织的数据&#xff0c;全球每年有近4亿工人因工受伤。近30…

matplotlib 波士顿房价数据及可视化 Tensorflow 2.4.0

matplotlib 波士顿房价数据及可视化 Tensorflow 2.4.0 目录 matplotlib 波士顿房价数据及可视化 Tensorflow 2.4.0 1. 认识 1.1 kears 1.2 kears常用数据集 2. 波士顿房价数据及可视化 2.1 下载波士顿房价数据集 2.2 展示一个属性对房价的影响 2.3 将是三个属性全部展…

【JavaSE篇】——数组的定义与使用

目录 本章的目标&#xff1a; &#x1f388;数组的基本概念 &#x1f36d;创建数组 &#x1f36d;数组的初始化 &#x1f36d;数组的使用 &#x1f449;数组中元素访问 &#x1f449;遍历数组 &#x1f388;数组是引用类型 &#x1f36d;初始JVM的内存分布 &#x1f…

SU-03T语音控制模块详解

当我们谈到智能家居时&#xff0c;经常会通过语音来控制我们的家电&#xff0c;将「懒」发挥到极致。语音模块结合了语音识别和控制技术&#xff0c;使得我们可以通过简单的口令来轻松操控灯光等设备&#xff0c;实现更智能化的生活体验。 在本文中&#xff0c;我们将探讨如何…

12.Elasticsearch应用(十二)

Elasticsearch应用&#xff08;十二&#xff09; 1.单机ES面临的问题 海量数据存储问题单点故障问题 2.ES集群如何解决上面的问题 海量数据存储解决问题&#xff1a; 将索引库从逻辑上拆分为N个分片&#xff08;Shard&#xff09;&#xff0c;存储到多个节点单点故障问题&a…

【UE5】如何给人物骨骼绑定Control Rig用来制作动画(控制)

本篇文章暂时只教绑定人物手部的Control Rig&#xff0c;脚的Control Rig举一反三即可 1&#xff0c;右键-创建-控制绑定 2在控制绑定中-右键创建基本IK 3&#xff0c;填入上臂-下臂-手 4【手和下臂】右键-新建-Add Controls For Selected&#xff0c;&#xff08;或者新建-…

关系三元组抽取方案

一、流程概览 先用序列标注模型预测句子中的实体&#xff0c;再对实体&#xff08;加上句子&#xff09;走关系分类模型&#xff0c;预测实体的关系&#xff0c;最后形成有效的三元组。 1、数据标注 2、数据处理 处理原始数据得到ner命名实体识别的训练预测数据和关系抽取训…

激光雷达标定入门(9)ROS驱动velodyne

这里根据雷达的ros驱动来&#xff0c;这里以velodyne为例。 地址&#xff1a;mirrors / ros-drivers / velodyne GitCode # clone到src git clone .......... # back ws catkin_make # donot forget source devel/setup.bash报错&#xff1a;fatal error: pcap.h: No such f…

ensp winpcap无法安装

安装ensp的依赖软件winpcap无法安装 发现提示已有最新版本、找网上都是修改文件后缀名&#xff0c;测试后发现根本不行&#xff0c;有点扯 npcap是wireshark安装带的&#xff0c;通过卸载wireshark安装 ensp安装顺序应该先安装winpcap->wireshark->virtualbox->ens…

浪花 - 后端接口完善

一、队伍已加入用户数量 1. 封装的响应对象 UserTeamVO 新增字段 hasJoinNum 2. 查询队伍 id 列表 3. 分组过滤&#xff0c;将 team_id 相同的 userTeam 分到同一组 4. 获取每一组的 userTeam 数量&#xff0c;即一个 team_id 对应几个userTeam&#xff08;用户数量&#x…

数据结构与算法教程,数据结构C语言版教程!(第六部分、数据结构树,树存储结构详解)三

第六部分、数据结构树&#xff0c;树存储结构详解 数据结构的树存储结构&#xff0c;常用于存储逻辑关系为 "一对多" 的数据。 树存储结构中&#xff0c;最常用的还是二叉树&#xff0c;本章就二叉树的存储结构、二叉树的前序、中序、后序以及层次遍历、线索二叉树、…
最新文章