工作笔记【三】——uni-app的网络请求

鹿时肆

于 2024-08-16 14:23:37 发布

阅读量650

点赞数 3

文章标签：笔记 uni-app

本文链接：https://blog.csdn.net/weixin_71798266/article/details/141253532

版权

在uni-app中，内置的uni.request()方法是一个统一的网络请求接口，支持HTTP和HTTPS协议，可以GET和POST等请求，基本可以满足大部分应用的网络通信需求，为了兼容uni-app生态和微信小程序，推荐使用uni.request()。

集成性

是uni-app框架的一部分，和其他组件紧密集成，使用更方便，不需要额外配置。

兼容性

已经为不同平台都做了优化和适配，不需要担心跨平台兼容性问题，直接使用。

简单易用

API设计简单，理解和使用更加容易，对于大多数常规的网络请求任务，提供了足够的功能。

性能

原生实现，所以有更好的性能表现，特别是数据量较大或者需要高效网络交互的时候。

维护成本

开发者只需要关注业务逻辑，网络库的更新与维护无需关注，节省维护成本。

由于uni-app是基于Vue的，所以也可以使用axios等，但是需要注意，axios在uni-app中可能需要进行一些适配工作，尤其是小程序。

简单示例：

methods(){
    getSwiperList(){
        uni.request({
            url:"你的数据接口",
            success:(res) => {
                //如果成功了，打印数据
                console.log(res);
            },
            fail:(res) => {
                console.log("请求失败");
            }
        })
    }
}

=========================================================================

1.网络请求封装

1.1 基础配置

let fileUrl="";
let baseUrl = "";
const env = "dev";
if (env === "dev") {
    baseUrl = 'http://192.168.0.108:8001';
    fileUrl = "http://192.168.0.108:8001/oss/upload";
} else if (env === "pro") {
    baseUrl = 'http://xxx.xxx.xxx.xxx';
    fileUrl = "http://xxx.xxx.xxx.xxx/oss/upload";
}

1.2 请求方法封装

定义一个 request，接受URL、请求方法、请求数据和请求头等参数，返回一个Promise对象。

在请求成功时，会判断返回的状态码，如果是401，则重新跳转到登录页；否则，将返回的数据通过resolve传递出去。

请求失败时，通过reject返回一个包含错误信息的对象。

基础网络：

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)
            }
        })
    })
}

文件上传：

const uploadFile = (filePath) => {
	return new Promise((resolve, reject) => {
        let header={};  
		header["Authorization"] = uni.getStorageSync("token");

		uni.uploadFile({
			url: fileUrl, //仅为示例，非真实的接口地址
			filePath: filePath,
			name: 'file',
			formData: {
				'user': 'test'
			},
			header: header,
			success: (res) => {
				resolve(JSON.parse(res.data))
			},
			fail: (err) => {
				let result = {
					code: 500,
					msg: "获取数据失败"
				};
				reject(result)
			}
		});
	})
}

1.3 不同请求方式封装

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

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

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);
    })
}

1.5 回调方式封装

在数据加载成功后执行回调函数。

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);
    })
}

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

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