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

前端小趴菜052025-04-08 17:57

在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);
		})
	})