uniapp接口请求api封装,规范化调用

封装规范和vue中的差不多,都是统一封装成一个request对象,然后在api.js里面调用。

先创建一个utils文件夹,然后里面创建一个request.js,代码如下:

javascript 复制代码
export const baseURL = '基础url地址'

const request = (options) => {
	// 判断是不是完整的地址,不是的话,拼接上baseUrl
	let urlPath = ""
	if (options.url.indexOf("http") === -1) {
		urlPath = baseURL + options.url
	} else {
		urlPath = options.url
	}
	console.log("请求的url是:", urlPath);
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseURL + options.url, //接口地址:前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法:传入的方法或者默认是"GET"
			data: options.data || {}, //传递参数:传入的参数或者默认传递空集合
			header: {
				'token': uni.getStorageSync("token") || "" //自定义请求头信息
			},
			success: (res) => {
				// 成功返回
				console.log("返回数据:", res)
				resolve(res.data.response_data)
			},
			// 这里的接口请求,如果出现问题就输出接口请求失败
			fail: (err) => {
				console.log("请求错误:", err)
				reject(err)
			}
		})
	})
}

export default request

在api文件夹中封装对应的index.js文件,然后导入request对象:

javascript 复制代码
import request from '@/utils/request'

export default {
	getUUID(data) {
		console.log("getUUID");
		return request({
			url: '/user/wxapp',
			method: 'get',
			data,
		})
	},
	changeStatus(data) {
		return request({
			url: '/message/isReads',
			method: 'post',
			data,
		})
	},
	getMsgType(params) {
		return request({
			url: '/message/messageType',
			method: 'get',
			params,
		})
	},
	deleteMsg(data) {
		return request({
			url: '/message/delete',
			method: 'post',
			data,
		})
	},
}

在对应的vue或者react中引入并调用:

相关推荐
BigTopOne4 小时前
【WebRtc】DTLS-SRTP 加密完整流程详解
前端
陈随易4 小时前
pm2 替代品,nodejs&bun 线上部署必备工具
前端·后端·程序员
单线程_014 小时前
从案例分析 Vue3 Tokenizer 源码一
前端·javascript·vue.js
BigTopOne4 小时前
【WebRtc】-ICE Candidate 与 STUN/TURN 原理详解
前端
l1258654 小时前
# LangGraph Memory机制深度解析:短期记忆与长期记忆的工程实践
前端·人工智能·python·langchain·bootstrap
码视野5 小时前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
大模型码小白5 小时前
AI 对话流性能调优:万级消息的虚拟滚动落地
java·大数据·前端·javascript·人工智能·算法·机器学习
xm_xm_xm_16 小时前
react17版本以前类组件常用操作
前端·javascript·react.js
ly76897 小时前
Web 性能优化实战:从 Core Web Vitals 到工程化性能治理
前端·性能优化
冬奇Lab7 小时前
一天一个开源项目(第200篇):next-forge - 生产级 Next.js SaaS 启动模板
前端·前端框架·开源