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