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,拿来即用。
希望这篇文章对大家有所帮助,可以的话帮忙点亮下旁边的小手,让更多人看到 ,
如果上述代码有错误和不足,请评论或私信,我好及时改正。