小程序异步和Promise

前序

异步算法经常出现在网站的利用中。比如前端已经获得到用户的登陆称号，要向网站关联的办事器后端发送指令查询用户的数据并返回，然后跳转到用户的详情页。假如不作异步要求，后真个数据还没有返回，网页就已经跳转到详情页，那详情页除了用户名，别的数据就没法一般显现了。所以要用到异步操纵。假如指定向收集上查询数据的运转是异步的，那跳转的工作就必须等返回数据才会履行，就能到达想要的结果。
再比如两行代码，向硬盘上写一个文件，翻开这个文件。运转时，一般情况都是写文件的号令发出了，接着就顿时履行翻开文件的号令。题目是写文件还没有完成，成果就是文件被占用没法翻开文件的毛病。一个处理法子就是不停的发出翻开文件的指令并catch，期待能翻开文件为止。不停的发出翻开文件的指令就相当于把存文件这个号令改成异步的了。
小法式云开辟也是不异的情况。由于云开辟，是挪用云上的方式或资本，与网站阅读器端挪用网站背景的道理类似。网上办事器端间隔电脑端旅程比力远，拜候返回能够需要花销的时候比力长，就有需要区分同步和异步的需要。假如需要云上信息的返回，根据返回的数据停止下一步的操纵，就需要异步的处置方式。
异步的简单了解

同步就是一段代码是同步停止（虽然是按顺序停止，但发出号令就行了）。发出指令的时候充足短，这一系列指令代码就是看做同步的。
异步就是其中的某条或多条代码，界说为异步，厥前面的代码都必须等这些异步的代码有返回告诉，才能顺次履行。
就比如，一位带领召集一切的部属到广场上，给一切人放置使命。带领点名到谁，谁就立即动身履利用命。点名这个行为几近不需要什么时候，那进来履利用命便可以看成是同步去履利用命。假如是A和A前面的人的使命之间有相关性（能够是做一样的工程），比如A和A前面的人都只会做自己熟悉的工作，而这些工作必须A完成后，前面的人材能去履行自己的使命。那只能这样放置，等A履行完使命后，前面的人在A的履行功效的根本上再去履行各自的使命。这样A的履利用命就是异步的。A的异步影响到前面人的使命履行时候。
小法式的异步操纵

同步伐用云函数

先看一个例子，比如小法式首页js文档的代码以下：

1. Page({
2.   onLoad(options) {
3.     wx.cloud.callFunction({
4.       name: 'quickstartFunctions',
5.       data: {
6.         type: 'getOpenId'
7.       }
8.     }).then((resp) => {
9.         console.log(resp.result.openid)
10.       }).catch((e) => {
11.         console.log(e)
12.       })
13.   }
14. })

复制代码

这是一个小法式网页端向小法式背景（小法式云）查询返回openid的例子。onLoad是网页加载时要履行的代码事务。wx.cloud.callFunction就是网页加载时要履行的代码。then、catch这类格式的官方称之为Promise气概。也可以写成非Promise气概的。以下：

1.      await wx.cloud.callFunction({
2.        name: 'quickstartFunctions',
3.        data: {
4.          type: 'getOpenId'
5.        },
6.        success: function (res) {
7.          console.log(res)
8.        },
9.        fail: function (res) {
10.          console.log("毛病")
11.        }
12.      })

复制代码

console.log：就是开辟工具控制台打印出运转成果。
then：就是wx.cloud.callFunction运转竣事后成功时（success）要履行的代码。
参数resp：返回的数据，是JOSN格式。所以要获得openid，还要晓得resp的工具结构，这里可以用res.result.openid来获得。
catch：云函数履行失利事务。
一般情况下，都能返回正确的openid。假如写成以下代码：

1. var openid='openid';
2. Page({
3.   onLoad(options) {
4.    wx.cloud.callFunction({
5.       name: 'quickstartFunctions',
6.       data: {
7.         type: 'getOpenId'
8.       }
9.     }).then((resp) => {
10.        openid = resp.result.openid;
11.        console.log(openid);
12.     }).catch((e) => {
13.        openid = '云函数履行毛病';
14.        console.log('云函数履行毛病');
15.     })
16.     console.log(openid);
17.   }
18. })

复制代码

就没法同步获得返回的openid。以下图：


说明代码还未等云函数then成功返回openid就转到了最初那行，把openid打印出来。然后才是then获得正确的openid后再打印出来。就由于then这里的运转不是异步的。是以法式不期待then的运转，就履行了获得openid的操纵。假如这时用这个openid存到数据库，那就会有错。正确的法子是在then函数里面履行保存openid的操纵。
把page代码改成以下：

1. Page({
2.   onLoad(options) {
3.     var data = '显现成果';
4.     data = wx.cloud.callFunction({
5.       name: 'quickstartFunctions',
6.       data: {
7.         type: 'getOpenId'
8.       }
9.     })
10.     console.log(data);
11.   }
12. })

复制代码

履行成果以下：


Promise是异步的

可以翻开quickstartFunctions和getOpenId的js文档看






说明quickstartFunctions和getOpenId都是异步的。但小法式真个wx.cloud.callFunction履行却没有指定为异步。
成果是个Promise工具，展开这个Promise，里面还是有openid的。以下图：


但很难拿到openid这个数据。没有像success后那样轻易拿到。
小法式云的函数，根基都是用Promise的方式。关于Promise工具和Promise的异步履行道理，可自行查找材料。
但没有成功事务的返回参数resp，就不能像resp.result.openid那样轻易的获得openid了。
异步伐用云函数

改成以下代码：

1. //力先代码示例
2. var openid='openid'
3. Page({
4.   onLoad(options) {
5.     this.GetUserOpenId();
6.   },
7.   async GetUserOpenId() {
8.     console.log(1);
9.     await this.GetUserOpenIdModule();
10.     console.log(3);
11.     console.log(openid);
12.   },
13.   async  GetUserOpenIdModule() {
14.     await wx.cloud.callFunction({
15.       name: 'quickstartFunctions',
16.       data: {
17.           type: 'getOpenId'
18.       }   
19.     })
20.       .then((resp) => {  
21.         console.log(2);
22.         openid=resp.result.openid;
23.       }).catch((e) => {
24.       });
25.   }
26. })

复制代码

调试便可以获得预期的结果了。以下图：


var openid：界说了页面全局变量，页面里面的代码都可以间接援用。
GetUserOpenId函数：在Page里面的函数，页面内的别的函数拜候都必须加this去拜候。
await this.GetUserOpenIdModule()：异步指令，期待GetUserOpenIdModule函数里面的代码都履行终了才能同步到下一条代码。由于有了await关键词，地点的函数必须加上async（异步）关键词。
await wx.cloud.callFunction：期待挪用云函数的操纵履行终了。
这样做的益处能够是不需要必须在then或success事务里面写处置返回数据的代码，简明代码的条理。
结语

要获得小法式云函数的处置成果，就得响应的利用异步的方式。本文稍微展开研讨了小法式云函数的异步方式。