一、前言
在开发uni-app项目的时候，难免要进行网络请求，今天我们通过官方uni.request()进行发送网络请求。
在实际的项目开发中，接口会随着需求而增多，如果不对网络请求进行封装的话，会面临以下的问题：
- 网络请求代码分布在各个页面，代码混乱不方便管理
- 每次网络请求都需要设置请求头信息，冗余代码过多
二、实现思路
- 在utils目录下新建request.js文件 （utils目录不存在，请自行在项目根目录下创建）
- 在api目录下新建业务模块，例如用户相关：user.js (api目录不存在，请自行在项目根目录下创建)
- 在页面引入封装的业务模块，调用相关的方法。
三、步骤
（一）新建request.js （@/utils/request.js）
// 定义请求地址
const BASE_URL = "http://xxx.com/api/"
// 封装请求方法
const request = (obj) => {
obj.url = obj.url || ''; // 请求路径
obj.method = obj.method || 'GET'; //请求方式
obj.data = obj.data || {}; //请求携带的数据
obj.header = obj.header || 'application/json'; //请求头信息 content-type
obj.loading = obj.loading === false ? false : true; //是否显示请求加载中
obj.requestTime = obj.requestTime || 500 ; //多久时间内完成网络请求，则不显示提示框
let loadingStatus = true;
//定义网络请求如果在一定时间内没有完成，则显示加载中提示框，默认时间为：500毫秒
setTimeout(() => {
if(loadingStatus && obj.loading){
uni.showLoading({
title:"加载中",
mask:true
})
}
}, obj.requestTime)
//返回Promise对象
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + obj.url,
method: obj.method,
data: obj.data,
header: {
'Content-Type': obj.header
},
success: res => {
resolve(res);
},
fail: err => {
reject(err);
},
complete: () => {
if(loadingStatus && obj.loading) {
uni.hideLoading();
}
loadingStatus = false;
}
})
});
}
export default request;
（二）新建user.js （@/api/user.js）
import http from '@/utils/request.js'
export function login(data){
return http({
url : 'login',
method: 'POST',
data:data
});
};
}
（三）在页面中使用
<template>
<view class="container">
...此处代码省略
</view>
</template>
<script>
import { login } from '@/api/test.js'
export default {
data() {
return {
}
},
async onLoad() {
const { data: res} = await login({
username: 'zhangsan',
password: 'secret'
});
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 20px;
}
</style>
四、总结
以上便是我在uni-app项目开发过程中对网络请求的封装，方便日后自己快速定位同时，也希望能帮助到“远方”的你。如有错误或更好的实现，还请大佬们予以指正，共同进步。
\
