微信小程序解决诡异的异步问题

最新推荐文章于 2023-09-11 18:23:52 发布

CreatorRay

最新推荐文章于 2023-09-11 18:23:52 发布

阅读量2.1k

点赞数 10

分类专栏：前端微信小程序文章标签： js 小程序 javascript 前端

本文链接：https://blog.csdn.net/m0_46171043/article/details/109826562

版权

前端同时被 2 个专栏收录

268 篇文章 24 订阅

订阅专栏

微信小程序

34 篇文章 20 订阅

订阅专栏

先说一下什么是异步，我举一个通俗易懂的例子。
你现在有两个任务：

向Java老师要一份复习资料
买一瓶矿泉水

如果你是同步执行，那么你的执行过程就是，先去向老师要一份复习资料，等老师把复习资料给到了你的手里，然后你才去买那瓶矿泉水。

但是如果你是异步执行，那么你的执行过程就是，跑到老师面前，跟老师说，老师我要一份复习资料，然后你就立刻去买矿泉水了，在你买矿泉水的时候，那份复习资料，你可能拿到了，可能没拿到，取决于实际的情况。

大家应该能明白我表达的意思。
然后我们讨论一个问题，在程序执行中，到底是同步好还是异步好。答案肯定是不确定。要根据实际的业务场景才能分析出是同步好还是异步好，它们没有一个绝对的利害关系。

然后我们说一下微信小程序中的异步问题，微信小程序中大部分的API请求都是异步的，可能一些初学者在进行程序编写的时候，会发生一些很诡异的事情。就是，我看这段程序看了一遍又一遍，没发现任何错误，但是程序执行之后，答案就是不符合我的预期。很有可能你就是中了异步的坑了。因为你没有了解过异步执行，一直在用同步执行的思维解决问题。

我举一个代码的例子：

这是一个最简单的查询云函数的代码。

看一下云函数的内容：
在这里插入图片描述
只是给return一个字段为status值为success的数据。

然后看一下客户端JS的代码：

selectCloudFunction(){
  var status = null;
  wx.cloud.callFunction({
    name:'test',
    success(res){
      console.log(res);
      status = res.result.status;
    }
  })

  console.log("云函数执行结果是",status);
},

进行一个最简单的查询，对于初学者来说，经常这样写代码。在他们的理解里，程序的执行顺序是由上至下。我调用云函数之后，在success回调里给status赋了云函数的回调值。执行完云函数之后，我在下面输出一下我刚才赋值的变量，看一下赋值有没有成功。

思路似乎没有问题，但是这是同步的思路，很遗憾，云函数的调用是异步执行的。
我们看一下这样写的控制台输出。
在这里插入图片描述

status的值依然是null，而且我们可以很明显的注意到这两个console.log的输出时间似乎不符合我们的预期，下面的输出竟然优于上面的输出先执行。
天呐，到现在很多小朋友都会崩溃，这是什么人间疾苦。
不要慌张，下面我们来解决一下这个问题。

如果你没有学过ES6、ES7的话，我建议你使用回调嵌套的解决办法。
代码如下：

selectCloudFunction(){
  var status = null;
  wx.cloud.callFunction({
    name:'test',
    success(res){
      console.log(res);
      status = res.result.status;
      console.log("云函数执行结果是",status);
    }
  })
},

在这里插入图片描述
因为代码过于简单，可能看不出太大的区别，但是我们看控制台的输出，现在的输出结果已经符合我们的预期了。

这是对于初学者来说，最无脑的解决方法。但是当代码量增多的时候，就会产生回调地狱的情况，层层嵌套，到时候代码维护起来十分的困难。

在ES6，有了Promise来解决异步问题。

先看代码：

selectCloudFunction(){
  var status = null;
  var promise = new Promise((resolve,reject) => {
    wx.cloud.callFunction({
      name:'test',
      success(res){
        console.log(res);
        status = res.result.status;
        resolve();
      }
    })
  });
  promise.then(()=>{
    console.log("云函数执行结果是",status);
  })
},