Promise封装request-mysunniess教学
程序员文章站
2022-06-23 15:22:22
小程序实战开发(一)promise封装request
wx.request是我们实际开发中很常用的一个东西
但是我看到他第一个回忆起来的就是对异步的恐惧,还记得当年看得见抓不着的数据吗?还记得当年...
小程序实战开发(一)promise封装request
wx.request是我们实际开发中很常用的一个东西
但是我看到他第一个回忆起来的就是对异步的恐惧,还记得当年看得见抓不着的数据吗?还记得当年的回调地狱吗?
看的见抓不着
page({ data: { mydata: '' }, // loadmydata函数用于打印mydata的值 loadmydata () { console.log('获取到的数据为:' + this.data.mydata) }, // 生命周期函数onload用于监听页面加载 onload: function () { wx.request({ url: 'https://api', // 某个api接口地址 success: res => { console.log(res.data) this.setdata({ mydata: res.data }) console.log(this.data.mydata) } }) // 调用之前的函数 this.loadmydata() } })
我们在控制台会得到这样的输出
输出的数据为什么会为空呢?
很简单的问题,wx.request是个异步操作,js不会等待他先执行完在往下执行,而是先去执行了this.loadmydata()这样的话输出结果肯定为空了。
其实有经验的人都知道,遇到异步函数不要慌,一个回调解决它。也就是说对于一个异步函数,我们传一个回调函数就可以来接收结果了。
回调解决异步问题
onload: function () { wx.request({ url: 'https://api', // 某个api接口地址 success: res => { console.log(res.data) this.setdata({ mydata: res.data }) console.log(this.data.mydata) // 把使用数据的函数写在回调函数success中 this.loadmydata() } }) }
这样就可以正确输出了。
异步是解决了,但是回调地狱呢?(这才是最可怕的)
asyncfn1(function(){ //... asyncfn2(function(){ //... asyncfn3(function(){ //... asyncfn4(function(){ //... asyncfn5(function(){ //... }); }); }); }); });
wx.request它在页面复杂,执行顺序要求多的情况下,弊端也是很明显的,不过好在小程序支持es6,我们还有promise可以使用
使用promise封装wx.request
promise是将异步的执行逻辑和结果处理分离,使处理逻辑更加清晰。
/** * requestpromise用于将wx.request改写成promise方式 * @param:{string} myurl 接口地址 * @return: promise实例对象 */ const requestpromise = myurl => { // 返回一个promise实例对象 return new promise((resolve, reject) => { wx.request({ url: myurl, success: res => resolve(res) }) }) } // 我把这个函数放在了utils.js中,这样在需要时可以直接引入 module.exports = requestpromise
使用promise封装的wx.request
// 引用模块 const utilapi = require('../../utils/util.js') page({ ... // 生命周期函数onload用于监听页面加载 onload: function () { utilapi.requestpromise("https://www.bilibili.com/index/ding.json") // 使用.then处理结果 .then(res => { console.log(res.data) this.setdata({ mydata: res.data }) console.log(this.data.mydata) this.loadmydata() }) } })
当有多个请求时,直接不断的去 .then(function) 就行,逻辑很清晰
这里只是写了一个最简单的promise函数,还不完整。更完整的promise化wx.request,等以后业务需要再完善吧。另外各种小框架也都有了现成的promise化api,拿来即用。
希望这篇文章对大家有所帮助,可以的话帮忙点亮下旁边的小手,让更多人看到 ,
如果上述代码有错误和不足,请评论或私信,我好及时改正。
上一篇: 长白山天池旅游路线 长白山天池门票及路线
下一篇: MySQL创建用户数据的导入导出操作讲解