uni-app封装一个request请求(1)
使用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等方面进行优化和整合。 请大家持续关注啊!
作者:不是Null
链接:https://juejin.cn/post/7026643332587601956