微信小程序异步处理详解


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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
XP折叠菜单&仿QQ2006菜单
Dec 16 Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
深入koa-bodyparser原理解析
Jan 16 Javascript
javascript中call,apply,bind的区别详解
Dec 11 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
js实现日历的简单算法
2017/01/24 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python绘制漏斗图步骤详解
2019/03/04 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python和Sublime整合过程图示
2019/12/25 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
幼师自荐信范文
2013/10/06 职场文书
英文简历中的自我评价
2013/10/06 职场文书
男方父母证婚词
2014/01/12 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
浅谈Redis在直播场景的实践方案
2021/04/27 Redis