uni-app封装一个request请求（1）

「这是我参与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等方面进行优化和整合。 请大家持续关注啊！