「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」
使用uni-app请求网络接口，可以通过uni.requestt(OBJECT)发送网络请求，可以查看官方文档。
但是在实际的项目开发中接口会因为需求而增多，如果我们每请求一次接口，就按照文档中的所属的请求步骤去请求接口，会使得页面代码非常的繁杂，且会有很多多余的代码。还会面临几个不方便的问题：
- 请求头每次网络请求都要单独设置
- 返回数据的正确性判断每次都要重复大量代码
- 返回数据格式有变化需要修改所有网络请求的地方
所以，在给项目接入接口前，我们可以将网络请求" uni.request(OBJECT) "进行封装，随后在全局文件（main.js）中引入，如此就可以剩下许多重复的代码，减小项目文件的大小。
那么，该怎么使用uni-app封装一个request请求呢？
具体步骤如下：
一、项目根目录下新建utils文件夹，创建request.js文件,用来写封装的代码。
思路如下：1. 定义域名：baseUrl；2. 定义方法：api；3. 通过promise异步请求，最后导出方法。
const baseUrl = 'http://localhost:3000'
const request = (url = '', date = {}, type = 'GET', header = {}) => {
return new Promise((resolve, reject) => {
uni.request({
method: type,
url: baseUrl + url,
data: date,
header: header,
dataType: 'json',
}).then((response) => {
setTimeout(function() {
uni.hideLoading();
}, 200);
let [error, res] = response;
resolve(res.data);
}).catch(error => {
let [err, res] = error;
reject(err)
})
});
}
export default request
二、在main.js全局引入，避免每一页面或者组件需要请求接口时，文件的重复引入，节省代码。
import request from './utils/request.js'
Vue.prototype.$request = request
三、最后，在需要请求接口的组件内容进行使用。
onLoad() {
this.loadList()
},
methods: {
loadList() {
this.$request('/posts').then(res => {
console.log(res)
})
}
}
总结，上述封装只是对uni.reuqest进行的封装，后续还会对接口、拦截器、token等方面进行优化和整合。 请大家持续关注啊！
