桂林本地网站aso推广公司

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

创建文件

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

请求方法封装

http.js文件代码

//http.jslet 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文件代码

//api.jsimport { http } from '@/utils/http.js';// 示例：获取首页数据
export const getHome = ()=>{return http('/api/user/info', 'get')
}

页面使用

	import { onLoad } from '@dcloudio/uni-app'import { getHome } from '../../api/api'//页面加载调用onLoad(()=>{getHome().then((res)=>{console.log(res);})})