UniApp Vue 3 中的网络请求封装及用法

UniApp中,结合Vue 3的强大特性,进行网络请求的封装是项目中常见的需求。这样的封装不仅提高了代码的可维护性,还使得在组件中使用网络请求更加简洁。本文将详细介绍UniApp Vue 3中的网络请求封装,并提供一个简单的用法示例。

创建文件

在项目根目录下新建api文件夹下新建http.js和api.js

请求方法封装
http.js文件代码
javascript 复制代码
//http.js

let baseUrl = 'http://120.48.109.174:8081';

export const http = function(url, method = 'get', data = {}) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + url,
			data,
			method,
			header: {
				'token': uni.getStorageSync('token') || ''
			}, // 自定义请求头
			success: res => { // 成功的回调
				if (res.data.code == 401) {
					uni.reLaunch({
						url: "/pages/login/login"
					});
				}
				resolve(res.data);
			},
			fail: (err) => { // 失败的回调
				reject(err);
			},
			complete: () => { // 不论成功失败的回调
				// 可以在这里写一些通用的逻辑,比如隐藏加载动画
			}
		});
	});
};
api.js文件代码
javascript 复制代码
//api.js

import { http } from '@/utils/http.js';

// 示例:获取首页数据
export const getHome = ()=>{
	return http('/api/user/info', 'get')
}
页面使用
javascript 复制代码
	import { onLoad } from '@dcloudio/uni-app'
	import { getHome } from '../../api/api'

		
    //页面加载调用
	onLoad(()=>{
		getHome().then((res)=>{
			console.log(res);
		})
	})
相关推荐
皮蛋瘦肉粥_1218 分钟前
pink老师html5+css3day02
前端·css3·html5
qianmo202114 分钟前
基于pycharm实现html文件的快速实现问题讨论
前端·html
IT_陈寒14 分钟前
SpringBoot3踩坑实录:一个@Async注解让我多扛了5000QPS
前端·人工智能·后端
茶憶15 分钟前
uniapp 请求接口封装和使用
vue.js·uni-app
kura_tsuki18 分钟前
[Web网页] 零基础入门 HTML
前端·html
岁月宁静1 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
golang学习记1 小时前
从0死磕全栈之Next.js Server Actions 入门实战:在服务端安全执行逻辑,告别 API 路由!
前端
码农飞哥1 小时前
AI编程开发系统001-基于SpringBoot+Vue的旅游民宿租赁系统
vue.js·spring boot·毕业设计·ai编程·计算机源码
光影少年1 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
这儿有一堆花1 小时前
三种 弹出广告 代码开发实战
前端·html