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