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

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

1. 网络请求封装

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

1.1 基础配置

// request.jslet 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 请求方法封装

// request.jsconst 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 不同请求方式的封装

// request.jsconst 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 数据加载方法封装

// request.jsconst 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 回调方式封装

// request.jsconst loadPostCallback = (url, param, callback) => {let res = post(url, param);res.then((res) => {if (res.code !== 200) {return;}let data = res.data || [];if (callback) {callback(data);}}).catch((err) => {console.log(err);})
}

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

1.6 导出模块

// request.jsexport default { request, form, post, loadPostData, loadFormData, loadPostCallback };

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

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

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

// YourComponent.vue<template><!-- Your component template -->
</template><script>
import { ref } from 'vue';
import request from '@/path-to-request-module'; // 替换为实际的路径export default {setup() {const data = ref([])const fetchData = () => {let param = {appKey: "miniPage",fetch: "1",depth: "1"}request.loadPostData("/appMenu/list", param, data)}// 在适当的生命周期或事件中调用 fetchData// 例如：onMounted(fetchData) 或者 在某个按钮点击事件中调用return {data,fetchData}}
}
</script>