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

news2024/12/25 0:26:51

一、请求封装优点

  • 代码重用性:通过封装请求,你可以在整个项目中重用相同的请求逻辑。这样一来,如果 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.coloradmin.cn/o/1415932.html

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

相关文章

Java基础数据结构之哈希表

概念 顺序结构以及平衡树 中,元素关键码与其存储位置之间没有对应的关系,因此在 查找一个元素时,必须要经过关键 码的多次比较 。 顺序查找时间复杂度为 O(N) ,平衡树中为树的高度,即 O( log2N ) ,搜索的效…

应急响应-内存分析

在应急响应过程中,除了上述几个通用的排查项,有时也需要对应响应服务器进行内存的提权,从而分析其中的隐藏进程。 内存的获取 内存的获取方法有如下几种: 基于用户模式程序的内存获取;基于内核模式程序的内存获取&a…

SparkSql---用户自定义函数UDFUDAF

文章目录 1.UDF2.UDAF2.1 UDF函数实现原理2.2需求:计算用户平均年龄2.2.1 使用RDD实现2.2.2 使用UDAF弱类型实现2.2.3 使用UDAF强类型实现 1.UDF 用户可以通过 spark.udf 功能添加自定义函数,实现自定义功能。 如:实现需求在用户name前加上"Name:…

lv14 内核内存管理、动态分频及IO访问 12

一、内核内存管理框架 内核将物理内存等分成N块4KB,称之为一页,每页都用一个struct page来表示,采用伙伴关系算法维护 补充: Linux内存管理采用了虚拟内存机制,这个机制可以在内存有限的情况下提供更多可用的内存空…

docker compose实现mysql一主多从

参考了很多博客,死磕了几天,最终跑起来了,不容易,晚上喝瓶82年可乐庆祝下。 1、整体文件结构,这里忽略log、conf、data映射目录 2、docker-compose.yml文件内容如下: version: 3.3 services:mysql-master…

Android App开发-简单控件(3)——常用布局

3.3 常用布局 本节介绍常见的几种布局用法,包括在某个方向上顺序排列的线性布局,参照其他视图的位置相对排列的相对布局,像表格那样分行分列显示的网格布局,CommonLayouts以及支持通过滑动操作拉出更多内容的滚动视图。 3.3.1 线…

代码随想录算法训练DAY29|回溯5

算法训练DAY29|回溯5 491.递增子序列 力扣题目链接 给定一个整型数组, 你的任务是找到所有该数组的递增子序列,递增子序列的长度至少是2。 示例: 输入: [4, 6, 7, 7] 输出: [[4, 6], [4, 7], [4, 6, 7], [4, 6, 7, 7], [6, 7], [6, 7, 7], [7,7], [4,7,7]] 说…

【QT】QPainter基本绘图

目录 1 QPainter绘图系统 1.1 QPainter与QPaintDevice 1.2 paintEvent事件和绘图区 1.3 QPainter绘图的主要属性 1.4 创建实例 2 QPen的主要功能 2.1 线条样式 2.2 线条端点样式 2.3 线条连接样式 3 QBrush的主要功能 4 渐变填充 5 QPainter绘制基本图形元件 5.1 基本图形元件 …

burp靶场--身份认证漏洞

burp靶场–身份认证漏洞 https://portswigger.net/web-security/authentication#what-is-authentication 1.身份认证漏洞: ### 身份验证漏洞 从概念上讲,身份验证漏洞很容易理解。然而,由于身份验证和安全性之间的明确关系,它们…

基于Java SSM框架实现学校招生信息网系统项目【项目源码+论文说明】

基于java的SSM框架实现学生招生信息网系统演示 摘要 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,学校招生信息网当然也不能排除在外。学校招生信息网是以实际运用为开发背…

【大数据】Flink 中的状态管理

Flink 中的状态管理 1.算子状态2.键值分区状态3.状态后端4.有状态算子的扩缩容4.1 带有键值分区状态的算子4.2 带有算子列表状态的算子4.3 带有算子联合列表状态的算子4.4 带有算子广播状态的算子 在前面的博客中我们指出,大部分的流式应用都是有状态的。很多算子都…

OpenCV 0 - VS2019配置OpenCV

1 配置好环境变量 根据自己的opencv的安装目录配置 2 新建一个空项目 3 打开 视图->工具栏->属性管理器 4 添加新项目属性表 右键项目名(我这是opencvdemo)添加新项目属性表,如果有配置好了的属性表选添加现有属性表 5 双击选中Debug|x64的刚添加的属性表 6 (重点)添…

[LVGL] 可点击的文字label

LVGL8.x 自带的label 是没有点击响应的功能,即使加了lv_obj_add_event_cb 也不起作用,为了解决这个问题,我们使用了按钮控件去模拟纯label的效果;有了这个demo用户就可以实现类似超链接 点击一个文字就跳转到某个页面的功能。 st…

Kotlin 教程(环境搭建)

Kotlin IntelliJ IDEA环境搭建 IntelliJ IDEA 免费的社区版下载地址:Download IntelliJ IDEA – The Leading Java and Kotlin IDE 下载安装后,我们就可以使用该工具来创建项目,创建过程需要选择 SDK, Kotlin 与 JDK 1.6 一起使…

【大数据】详解 Flink 中的 WaterMark

详解 Flink 中的 WaterMark 1.基础概念1.1 流处理1.2 乱序1.3 窗口及其生命周期1.4 Keyed vs Non-Keyed1.5 Flink 中的时间 2.Watermark2.1 案例一2.2 案例二2.3 如何设置最大乱序时间2.4 延迟数据重定向 3.在 DDL 中的定义3.1 事件时间3.2 处理时间 1.基础概念 1.1 流处理 流…

1.【Vue3】前端开发引入、Vue 简介

1. 前端开发引入 1.1 前端开发前置知识 通过之前的学习,已经通过 SpringBoot 和一些三方技术完成了大事件项目的后端开发。接下来开始学习大事件项目的前端开发,前端部分借助两个框架实现: Vue3(一个 JS 框架)基于 …

Vue-Router: 如何使用路由元信息来管理路由?

Vue-Router是Vue.js官方的路由管理器,它可以帮助我们快速构建单页应用程序(SPA)。除了常见的路由功能外,Vue-Router还支持使用路由元信息来管理和控制路由。路由元信息是可以附加到路由上的自定义属性,它可以帮助我们实…

LandrayOA内存调优 / JAVA内存调优 / Tomcat web.xml 超时时间调优实战

目录 一、背景说明 二、LandrayOA / Tomcat 内存调优 2.1 \win64\tomcat\conf\web.xml 文件调优 2.2 \win64\tomcat\bin\catalina64.bat 文件调优 一、背景说明 随着系统的使用时间越来越长,数据量越多,发现系统的有些功能越来越慢&…

在腾讯云上部署幻兽帕鲁,实现游戏自由!

在帕鲁的世界,你可以选择与神奇的生物「帕鲁」一同享受悠闲的生活,也可以投身于与偷猎者进行生死搏斗的冒险。帕鲁可以进行战斗、繁殖、协助你做农活,也可以为你在工厂工作。你也可以将它们进行售卖,或肢解后食用。引用自&#xf…

第17章_反射机制(理解Class类并获取Class实例,类的加载与ClassLoader的理解,反射的基本应用,读取注解信息,体会反射的动态性)

文章目录 第17章_反射机制本章专题与脉络1. 反射(Reflection)的概念1.1 反射的出现背景1.2 反射概述1.3 Java反射机制研究及应用1.4 反射相关的主要API1.5 反射的优缺点 2. 理解Class类并获取Class实例2.1 理解Class2.1.1 理论上2.1.2 内存结构上 2.2 获取Class类的实例(四种方…