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

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

1. 网络请求封装

首先,我们创建一个网络请求的封装模块,通常包括以下几个部分:

1.1 基础配置

javascript 复制代码
// request.js

let baseUrl = "";
const env = "dev";

if (env === "dev") {
    baseUrl = 'http://192.168.0.108:8001';
} else if (env === "pro") {
    baseUrl = 'http://192.168.0.108:8001';
}

上述代码设置了请求的基础URL,根据不同的环境(开发或生产)设置不同的地址。

1.2 请求方法封装

javascript 复制代码
// request.js

const request = (url, method = 'GET', data = {}, header = {}) => {
    return new Promise((resolve, reject) => {
        header["Authorization"] = uni.getStorageSync("token");

        uni.request({
            url: baseUrl + url,
            method: method,
            data: data,
            header: header,
            success: (res) => {
                if (res.data.code == 401) {
                    uni.reLaunch({
                        url: "/pages/login/login"
                    })
                }
                resolve(res.data)
            },
            fail: (err) => {
                let result = { code: 500, msg: "获取数据失败" };
                reject(result)
            }
        })
    })
}

这里定义了一个通用的请求方法 request,接受URL、请求方法、请求数据和请求头等参数,返回一个Promise对象。在请求成功时,会判断返回的状态码,如果是401,则重新跳转到登录页;否则,将返回的数据通过resolve传递出去。请求失败时,通过reject返回一个包含错误信息的对象。

1.3 不同请求方式的封装

javascript 复制代码
// request.js

const form = (url, param) => {
    return request(url, "post", param, { 'Content-Type': 'application/x-www-form-urlencoded' })
}

const post = (url, param) => {
    return request(url, "post", param, { 'Content-Type': 'application/json' })
}

1.4 数据加载方法封装

javascript 复制代码
// request.js

const loadPostData = (url, param, ref) => {
    let res = post(url, param);
    res.then((res) => {
        if (res.code !== 200) {
            return;
        }
        ref.value = res.data || [];
    }).catch((err) => {
        console.log(err);
    })
}

const loadFormData = (url, param, ref) => {
    let res = form(url, param);
    res.then((res) => {
        if (res.code !== 200) {
            return;
        }
        ref.value = res.data || [];
    }).catch((err) => {
        console.log(err);
    })
}

这两个方法封装了不同场景下的数据加载,根据请求方式调用相应的post或form方法,然后根据返回的数据进行相应的处理。

1.5 回调方式封装

javascript 复制代码
// request.js

const loadPostCallback = (url, param, callback) => {
    let res = post(url, param);
    res.then((res) => {
        if (res.code !== 200) {
            return;
        }
        if (callback) {
            callback(res);
        }
    }).catch((err) => {
        console.log(err);
    })
}

这个方法在数据加载成功后执行回调函数,适用于需要在数据加载完成后执行额外操作的场景。

1.6 导出模块

javascript 复制代码
// request.js

export default { request, form, post, loadPostData, loadFormData, loadPostCallback };

最后,通过export default导出整个模块,以便在其他文件中引用。

2. 使用封装后的网络请求

有了以上的封装,我们可以在Vue组件中使用如下:

javascript 复制代码
<template>
	<view class="box">


		<input placeholder="搜索" v-model="searchObject.name" confirm-type="search"
			placeholder-class='icon iconfont icon-icon-test1'>


		<button @click="search">搜索</button>
		<button @click="goAdd">新增</button>


	</view>

	<view class="">

		<view v-for="data in model" style="min-height: 80rpx;">
			{{data.name}}
		</view>
        <uni-load-more :status="status" v-if="totalPage>0"></uni-load-more>
	</view>





</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import request from "/common/api.js"


	const model = ref([])
	const status = ref("more")
	const totalPage = ref(0)
	const searchObject = ref({
		name: "",
		no: 1,
		size: 20,
		sortField:"id",
		sortMethod:"desc"
	})

	const initData = () => {
		searchObject.value.no = 1;
		request.loadPostCallback("/question/search", searchObject.value, (res) => {
			if (res.code === 200) {
				model.value = res.data;
			}
			totalPage.value = res.totalPage;
			uni.stopPullDownRefresh();
		})
	}

	onShow(() => {
		request.loadPostCallback("/question/search", searchObject.value, (res) => {
			if (res.code === 200) {
				model.value = res.data;
			}
			totalPage.value = res.totalPage;
		})
	})
	onPullDownRefresh(() => {
		initData();
	})

	onReachBottom(() => {
		searchObject.value.no = searchObject.value.no + 1;
		if (searchObject.value.no <= totalPage.value) {
			status.value = "loading";
		} else {
			status.value = "noMore";
			return;
		}
		request.loadPostCallback("/question/search", searchObject.value, (res) => {
			console.info(res)
			if (res.code === 200) {
				if (res.data) {
					console.info(res.data)
					model.value = model.value.concat(res.data);
					status.value = "more";
				} else {
					status.value = "noMore";
				}

			}
		})
	});

	onLoad(() => {

	})

	const search = () => {
		initData();
	}
	const input = () => {

	}

	const goAdd = () => {
		uni.navigateTo({
			url: "/pages/home/feedback/add"
		})
	}
</script>

上述代码中,我们引入了ref用于创建响应式变量,然后导入了我们封装好的网络请求模块。在setup函数中,我们定义了一个名为data的响应式变量和一个名为fetchData的函数,用于发起网络请求。

在fetchData函数中,我们定义了请求参数 param,然后调用request.loadPostData方法进行数据加载。这样,我们在组件中只需关注数据的使用和业务逻辑,网络请求的具体实现被封装在了request模块中。

这样的封装使得代码更加清晰,降低了组件的复杂度,同时也提高了代码的可维护性。

通过这种方式,你可以轻松地在Vue 3中进行网络请求,并在项目中重用封装好的请求方法。

相关推荐
编程指北2 分钟前
字节 Trae 最新更新,支持 MCP 和智能体,最新一手实测!
前端·trae
brzhang7 分钟前
面试官:讲讲 gRPC?别慌,老码小张带你从原理到实践彻底搞懂它!
前端·后端·架构
天天扭码9 分钟前
我使用Coze十分钟搭建了一个AI应用——创意写真馆
前端·ai编程·coze
专业掘金11 分钟前
0428 手打基础丸
前端
张开心_kx17 分钟前
面试官又问我受控组件和非受控组件?
前端·javascript·react.js
brzhang20 分钟前
流量大了就加机器?太 Low 了!负载均衡的这些高级玩法,让你部署、测试、安全一步到位!
前端·后端·架构
LavenderLee20 分钟前
CSS+JS实现融球+跟随鼠标效果
前端
山河故人16320 分钟前
基于 SSE 和分块传输的 Uniapp 微信小程序 实现 流式传输 对话
微信小程序·小程序·uni-app
我是哪吒21 分钟前
分布式微服务系统架构第122集:NestJS是一个用于构建高效、可扩展的服务器端应用程序的开发框架
前端·后端·面试
凯哥197023 分钟前
Sciter.js 指南 - GUI的窗口管理特性详解
前端