当前位置:首页 > 日记 > 正文

微信小程序异步处理详解

微信小程序异步处理详解

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

直接看问题:

然后看打印的结果:

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

调用:

打印结果

这样就可以了,完结。

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

相关文章

解决ASP.NET Core Mvc文件上传限制

解决ASP.NET Core Mvc文件上传限制

文件上传,实例,电脑软件,NET,ASP,一、简介在ASP.NET Core MVC中,文件上传的最大上传文件默认为20MB,如果我们想上传一些比较大的文件,就不知道怎么去设置了,没有了Web.Config我们应该如何下手呢?二、设置上传文件大小1.应用程序级别设置我们需…

JS之if语句对接事件动作逻辑 | 详

JS之if语句对接事件动作逻辑 | 详

语句,事件,详解,逻辑,动作,if 函数的实现步骤:function +名字()指定id , 指定开关(display: none or block)if + else 构成逻辑 控制开关决定在哪里安置一个灯泡, 指定一个id给某个标签把开关用电线连着灯泡, 安装开关#+id名称{ 属性1= 赋值…

浅谈jquery中ajax跨域提交的时候会

浅谈jquery中ajax跨域提交的时候会

提交,请求,跨域,会有,浅谈,我们平时在同域中请求页面什么的时候不会有这种情况,这种情况大多发生在移动端的跨域请求中发生的。解决方法就是在服务端中加一层过滤HTTP请求的类型,把OPTION等不用的类型过滤掉。就是当请求为非HTTP中的 GET 和 …

JS库 Highlightjs 添加代码行号的

JS库 Highlightjs 添加代码行号的

行号,代码,电脑软件,JS,Highlightjs,Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。然而,Highlightjs默认是不包括显示代码行号(Line Number)这一特性的,不过可以通过简单的JS代码和CSS样式表实现…

painter怎么使用钢笔画笔绘制图形?

painter怎么使用钢笔画笔绘制图形?

绘制图形,电脑软件,painter,Painter绘制图形很简单,是一款很常用的绘图软件,今天我们就来看看painter中钢笔画笔的使用方法,请看下文详细介绍软件名称:Corel Painter(绘画软件) 2018 官方正式版(附注册机) 在线安装包 64位软件大小:994KB更新时…

excel表格斜杠绘制教程

excel表格斜杠绘制教程

绘制,教程,斜杠,表格,电脑软件,  Excel表格中如何绘制斜杠呢?下面是由小编分享的excel表格斜杠绘制教程,以供大家阅读和学习。excel表格斜杠绘制教程:  绘制斜杠步骤1:有时候,做表格需要给第一个格加斜杠,如下,绘制斜杠步骤2:选中要加斜杠的单…

Bootstrap栅格系统使用方法及页面

Bootstrap栅格系统使用方法及页面

变形,栅格系统,调整,解决方法,使用方法,如果你以前使用过Bootstrap2或者了解过响应式技术,那么肯定对Bootstrap栅格系统并不陌生,由于栅格系统的引入,使得Bootstrap的跨设备布局显示变得可能。什么是栅格系统栅格系统是指,将页面布局划分为等宽…

手机wps的ppt背景怎么编辑

手机wps的ppt背景怎么编辑

模板,方法,幻灯片,背景,编辑,  wps幻灯片的制作,怎么用手机去制作ppt呢?其实手机添加幻灯片模板和制作方法都很简单,关键是多学,下面给大家分享使用手机wps编辑幻灯片模板的方法,欢迎大家来到学习。手机wps添加幻灯片模板的方法wps添加幻灯片…

ps怎么制作一个膨胀文字的动画效果

ps怎么制作一个膨胀文字的动画效果

膨胀,动画效果,文字,电脑软件,ps,ps想要制作一段文字变形的动画,该怎么制作呢?下面我们就来看看ps制作文字膨胀效果的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先启动Photoshop cs5,执行…

用Photoshop把一张裁剪出一个圆形

用Photoshop把一张裁剪出一个圆形

电脑软件,Photoshop,对图片进行裁剪很容易,有时我们直接截图就可以了,可是如果我们要截取一个圆形出来还是借用Photoshop来处理比较好,下面就为大家详细介绍一下,一起来看看吧!步骤:1、用Photoshop打开需要处理的照片,如图2、选择使用椭圆选框工具…

PS怎么设计一个淘宝无线端首页?

PS怎么设计一个淘宝无线端首页?

首页,淘宝,电脑软件,PS,无线端的店铺主页的教程,详细请看下文。软件名称:Adobe photoshop 6.0 汉化中文免费版软件大小:107MB更新时间:2013-04-191、新建一个空白的背景图层如所示大小2、利用圆角矩形工具画出如所示的矩形3、然后将这上面的一…

ppt2010怎么打包成CDppt2010打包成

ppt2010怎么打包成CDppt2010打包成

步骤,方法,电脑软件,CD,strong,  所谓打包,指的就是将独立的已综合起来共同使用的单个或多个文件,集成在一起,生成一种独立于运行环境的文件。ppt如何打包?今天小编就来告诉你ppt2010打包成CD的方法步骤吧。希望对你有帮助!ppt2010打包成cd的…