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);
		})
	})
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
源码_V_saaskw7 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript