微信小程序开发（十二）Promise将异步改为同步
<div class="cnblogs_code"><pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> utils/utils.js<br></span></pre>
<p> /** </p>
<p> * requestPromise用于将wx.request改写成Promise方式 </p>
<p> * @param：{string} myUrl 接口地址 </p>
<p> * @return: Promise实例对象 </p>
<p> */ </p>
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> requestPromise = myUrl =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 返回一个Promise实例对象 </span>
<span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">new</span> Promise((resolve, reject) =><span style="color: rgba(0, 0, 0, 1)"> {
wx.request({
url: myUrl,
success: res </span>=><span style="color: rgba(0, 0, 0, 1)"> resolve(res)
})
})
}
module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
requestPromise: requestPromise
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> pages/test/test.js
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 导入util.js文件</span>
<span style="color: rgba(0, 0, 255, 1)">const</span> utilApi = require(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">../../utils/util.js</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
Page({
data: {
myData: </span><span style="color: rgba(128, 0, 0, 1)">''</span><span style="color: rgba(0, 0, 0, 1)">
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> loadMyData函数用于打印myData的值 </span>
<span style="color: rgba(0, 0, 0, 1)">loadMyData() {
console.log(</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">获取到的数据为：</span><span style="color: rgba(128, 0, 0, 1)">'</span> + <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.data.myData)
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 生命周期函数onload用于监听页面加载 </span>
<span style="color: rgba(0, 0, 0, 1)">onLoad: function() {
utilApi.requestPromise(</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">http://172.20.10.10:8080/wx?name=小明&oaid=xiaoming</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 使用.then处理结果 </span>
.then(res =><span style="color: rgba(0, 0, 0, 1)"> {
console.log(res.data)
</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.setData({
myData: res.data
})
console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.data.myData)
</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.loadMyData()
})
}
})</span></pre>
</div>
<p>当有多个异步请求时，直接不断地.then(fn)去处理即可，逻辑清晰。</p>
<p>当然，这里只是写了一个最简单的Promise函数，还不完整。更完整的Promise化wx.request，等以后业务需要再完善吧。另外各种小程序开发框架也都有了现成的promise化API，拿来即用。</p><br><br>
来源：https://www.cnblogs.com/aaronthon/p/11698201.html
頁:
[1]