微信小程序踩坑系列_从wx.request谈谈异步处，微信小程序request域名

来源：未知 浏览 161次 时间 2021-06-09 07:01

见到wx.request的第一眼就让我想起了$.ajax这东西使用起来确实有很多不方便百度索引量使用起来确实有很多不方便不能忍幸好小程序是支持ES6语法的所以可以使用promise稍加改造。

先来说说wx.request为什么不能忍。

微信小程序踩坑系列_从wx.request谈谈异步处理

这其实是一个很简单的异步问题wx.request是异步请求JS不会等待wx.request执行完毕再往下执行所以JS按顺序会先执行this.loadMyData()百度索引量所以JS按顺序会先执行this.loadMyData()等服务器返回数据以后loadMyData()早就执行完了当然也就没有拿到值啦。

微信小程序踩坑系列_从wx.request谈谈异步处理

初步解决：通过回调接收结果

最简单的解决方案就是把需要使用异步数据的函数写在回调里：


... 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(){ //... }); }); }); }); });  

有没有感觉头皮发麻？什么优雅什么可读性瞬间荡然无存这就是恐怖的“回调地狱”（Callback Hell）。

而我们发现微信小程序的网络请求wx.request也正是这种依靠回调函数的形式类似于以前的$.ajax它在逻辑复杂、页面执行顺序要求多的情况下弊端也是很明显的。不过好在小程序支持ES6我们可以尽情地拥抱Promise！

使用Promise包装wx.request

Promise这东西简单说来就是它可以将异步的执行逻辑和结果处理分离摒弃了一层又一层的回调嵌套使得处理逻辑更加清晰。想具体了解的还请自行查找资料。

现在我们就用Promise包装一下wx.request：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /** * 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  

现在再使用试试：


// 引用模块 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(fn)去处理即可逻辑清晰。

标签： Promise函数异步

上一篇: 小程序开发还能怎么玩 「云开发」模式了解一，手机开发者模式利弊
下一篇: BAT小程序均已开放申请，开发者站队前必须要问自己3个问，什么是小程序

热门文章

最新文章

QQ咨询