微信小程序异步处理详解


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怎么终止程序return不行换jfslk
May 30 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
vue中对象数组去重的实现
Feb 06 Javascript
浅谈JavaScript 声明提升
Sep 14 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
function.inc.php超越php
2006/12/09 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
初识Laravel
2014/10/30 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
Python开发常用的一些开源Package分享
2015/02/14 Python
tensorflow更改变量的值实例
2018/07/30 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
对于Python深浅拷贝的理解
2019/07/29 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
公司员工活动策划方案
2014/08/20 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
原生JS实现飞机大战小游戏
2021/06/09 Javascript