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中进行网络请求,并在项目中重用封装好的请求方法。

相关推荐
MarcoPage9 分钟前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发10 分钟前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
工业互联网专业19 分钟前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
**之火32 分钟前
Web Components 是什么
前端·web components
顾菁寒32 分钟前
WEB第二次作业
前端·css·html
前端宝哥33 分钟前
10 个超赞的开发者工具,助你轻松提升效率
前端·程序员
你好龙卷风!!!35 分钟前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
Ljw...1 小时前
Vue.js组件开发
vue.js
兔老大的胡萝卜1 小时前
threejs 数字孪生,制作3d炫酷网页
前端·3d
尚学教辅学习资料2 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱