解决微信小程序异步问题

问题:

微信小程序是通过wx.request进行异步处理的,异步处理简单地来说就是,JS不会等待前面wx.request执行完毕再往下执行,而是会直接顺序执行下去。所以,当后者需要前者执行完毕才能正确执行时,就会出现问题。
例如:下面这种情况,需要先调用getCates()函数,Cates才能有值。如果代码直接如下书写,就会发现menuList一直为空。
在这里插入图片描述
在这里插入图片描述
上面的方法已经成功调用,但是menuList始终为空,这就是异步处理带来的问题。先执行了下面的赋值方法,所以将空的Cates赋值给了menuList。

解决方法:

我们在getCates()方法中使用了封装好的request, 封装的request/index.js中采用的是promise技术(见后面),此时去解决异步问题就非常简单了,见下图。
在这里插入图片描述

这样就可以控制在函数调用成功后再往下执行,menuList就可以成功被赋值了。
在这里插入图片描述

promise技术

export const request=()=>{
	return new Promise((resolve,reject)=>{
        wx.request({
            ...params,
            success:(result)=>{
                resolve(result);
            },
            fail:(err)=>{
                reject(err);
            }
        })
    })
}

promise有三种状态:pending初始状态 fulfilled操作成功 rejected操作失败

当promise状态发生改变就会触发then()里面的响应函数处理后续步骤;

promise状态改变一次后就不会再改变。

采用promise技术封装好后就可以在页面的js文件中引入声明直接使用了。


版权声明:本文为qq_44695511原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。