微信小程序异步处理详解


Posted in Javascript onNovember 10, 2017

本文实例为大家分享了微信小程序异步处理的具体方法,供大家参考,具体内容如下

直接看问题:

微信小程序异步处理详解

然后看打印的结果:

微信小程序异步处理详解

根据上面两图可以看出,代码上先执行的网络请求,再执行打印的变量,但是从下面打印的结果来看,先出结果的是执行打印变量的函数(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:

微信小程序异步处理详解

调用:

微信小程序异步处理详解

打印结果

微信小程序异步处理详解

这样就可以了,完结。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
微信小程序实现选项卡功能
Jun 19 #Javascript
微信小程序实现多宫格抽奖活动
Apr 15 #Javascript
十分钟带你快速了解React16新特性
Nov 10 #Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 #Javascript
Three.js加载外部模型的教程详解
Nov 10 #Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 #Javascript
three.js加载obj模型的实例代码
Nov 10 #Javascript
You might like
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
jQuery实现本地存储
2020/12/22 jQuery
JavaScript WeakMap使用详解
2021/02/05 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python中防止sql注入的方法详解
2017/02/25 Python
详谈python read readline readlines的区别
2017/09/22 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
对python中的argv和argc使用详解
2018/12/15 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Django封装交互接口代码
2020/07/12 Python
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
岗位职责风险防控
2014/02/18 职场文书
给老师的感谢信
2015/01/20 职场文书
法院答辩状格式
2015/05/22 职场文书
中秋节随笔
2015/08/15 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
工伤调解协议书
2016/03/21 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python