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);
		})
	})
相关推荐
努力写代码的熊大2 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER2 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh2 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒2 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
今天没有盐3 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
云枫晖3 小时前
Webpack系列-Entry入口
前端·webpack
mustfeng3 小时前
VCS & Verdi 2023安装
java·服务器·前端
Mintopia4 小时前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙4 小时前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户433845375694 小时前
Promise深度解析,以及简易版的手写实现
前端