微信小程序异步处理详解


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 相关文章推荐
让复选框只能选择一项的方法
Oct 08 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
JS常用算法实现代码
Nov 14 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 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 define的第二个参数使用方法
2013/11/04 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
prototype class详解
2006/09/07 Javascript
jquery对表单操作2
2011/04/06 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
vue.js中created方法作用
2018/03/30 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
javascript History对象原理解析
2020/02/17 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
Python pass 语句使用示例
2014/03/11 Python
基于Python解密仿射密码
2019/10/21 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
为什么使用接口?
2014/08/13 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
班主任工作年限证明
2014/01/12 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
业务员岗位职责范本
2015/04/03 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Python中with上下文管理协议的作用及用法
2022/03/18 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android