这里有新鲜出炉的精品教程, 程序狗速度看过来!
微信 即时通讯软件
微信 (英文名: wechat) 是腾讯公司于 2011 年 1 月 21 日推出的一个为智能终端提供即时通讯服务的免费应用程序, 微信支持跨通信运营商跨操作系统平台通过网络快速发送免费语音短信视频图片和文字, 同时, 也可以使用通过共享流媒体内容的资料和基于位置的社交插件摇一摇漂流瓶朋友圈公众平台语音记事本等服务插件
这篇文章主要为大家详细介绍了微信小程序异步处理的相关资料, 具有一定的参考价值, 感兴趣的小伙伴们可以参考一下
直接看问题:
然后看打印的结果:
根据上面两图可以看出, 代码上先执行的网络请求, 再执行打印的变量, 但是从下面打印的结果来看, 先出结果的是执行打印变量的函数(aafn 函数), 再打印出网络请求 success 的回调里返回的数据和赋值后的变量的值;
为什么先执行的 aafn, 并且打印的值没有赋值上?
因为 wx.request 是一个异步的请求, 所以数据请求的同时, 可以继续向下执行函数所以这里值还没有赋值上就开始打印了变量的值;
这种情况, 怎么解决呢?
方法一:
嵌套
在 wx.request 的 success 回调里执行 aafn 函数
然后运行结果
这里就取到值了
但是如果逻辑很复杂, 需要用到很多层异步, 就像这样:
- asyncFn1(function(){
- //...
- asyncFn2(function(){
- //...
- asyncFn3(function(){
- //...
- asyncFn4(function(){
- //...
- asyncFn5(function(){
- //...
- });
- });
- });
- });
- });
这样代码看起来就很不好看, 代码的可读性和可维护性就不好了
那怎么解决这个问题呢? Promise 这种概念的产生, 很好地解决了这一切, Promise 是什么? 这里我就不多说了有兴趣的自己去看一看, Promise 介绍链接
先看看 Promise 的方式:
- function asyncFn1(){
- return new Promise(function (resolve, reject) {
- //...
- })
- }
- // asyncFn2,3,4,5 也实现成跟 asyncFn1 一样的方式...
调用
- asyncFn1()
- .then(asyncFn2)
- .then(asyncFn3)
- .then(asyncFn4)
- .then(asyncFn5);
这样的话, 异步函数就可以依次执行了
微信小程序的异步 API 怎么支持 Promise 呢? 我们可以一个一个的用 Promise 去包装这些 API, 但是这个还是比较麻烦的不过, 小程序的 API 的参数格式都比较统一, 只接受一个 object 参数, 回调都是在这个参数中设置, 所以, 这为了统一处理提供了便利, 写一个工具方法, 来完成这样的工作
首先需要引用一个叫 bluebird.js 的文件;
进入 bluebird 官网下载:
这个好像是不能下载的, 但是你可以点击进入, 然后复制, 在小程序里创建一个 js 文件, 将代码复制到这个 js 里面, 然后引用
然后再写一个 JS, 里面写工具方法:
下面是 prom.js
然后需要使用的那个页面的 js 里引入 prom.js:
调用:
打印结果
这样就可以了, 完结
来源: http://www.phperz.com/article/18/0315/360848.html