promise和callback在微信小程序异步调用中的应用

2018/10/30 Linux

本博客所有文章采用的授权方式为 自由转载-非商用-非衍生-保持署名 ,转载请务必注明出处,谢谢。

声明:
本博客欢迎转发,但请保留原作者信息!
博客地址: 孟阿龙的博客

背景

近期,因为工作需要在研究微信小程序。 微信小程序基本是通过Javascript+css+wxml(类html)组合而成。对于精通前端技术的人来说,javascript中的promise、callback应该是非常熟悉了,但是对于javascript小白来说,这类技术还是需要研究。本文即是对javascript中的这两个概念的具体应用进行举例分析。

需求

小程序中的主体逻辑是用js实现的,并且小程序中大部分网络交互的接口实现都是异步的,因此在写小程序时,不可避免的就必须和异步进行打交道。接下来举个简单的例子,来看看callback和promise在异步接口中的应用。

需求举例:

  1. 首先我在数据库的medicine表中插入了3条药品信息记录,每条记录简单的包含药品的一些基础信息。
  2. 在小程序中,我们需要从medicine表中查出所有药品记录进行展示

解决方案:

  1. 传统的方案,我们写个同步接口,先查数据库再进行数据输出即可
  2. 但是在小程序中,微信提供的数据库访问接口都是异步的,因此不能用简单的同步模式写代码,这时就需要使用callback或者promise

实现方案1:传统同步模式

image.png

  1. 按照同步模式的理解,以上代码第8行,调用this.getDbData函数查询数据库,在函数内将查询结果赋值给全局变量data中的medicine中,并输出查询结果
  2. 第9行,在调用了getDbData函数之后,再输出变量data的内容,发现medicine变量并没有被赋值,如下图 image.png

  3. 从上边的执行结果可以看到,第9行先执行了,getDbData中的输出还后执行了 这就是因为getDbData中调用数据库的接口,在微信API中是异步实现的,因此要想实现查询获取了相关数据之后,再对数据做进一步处理就需要使用callback机制或者promise

实现方案2:callback模式改造

image.png

  1. 如上,在第8行增加了this.process_data作为callback传入getDbData函数中
  2. 第12~14行,是callback函数的定义,并在该函数中输出相关全局变量的内容
  3. 第25行,是执行完数据库查询并且完成全局变量赋值之后,将全局变量传给callback函数并调用,整体执行结果如下: image.png

实现方案3:promise模式改造

image.png

  1. 如上,第15行重新定义了promise模式的函数,getDataByPromise返回的是一个promise对象
  2. 在第7行调用函数之后,在then中执行相关后置动作,具体执行效果如下: image.png

以上,即为这几种模式的对比。 附,完整代码:


Page({
  data: {
    "medicine": "N/A",
  },
  onLoad: function (options) {
    // callback模式处理异步调用
    // var that = this;
    // this.getDbData("medicine", {}, "medicine", this.process_data)
    // console.log("in onLoad:", this.data)

    // promise模式处理异步调用
    this.getDataByPromise("medicine", {}).then((data) => { 
      this.setData({
        "medicine": data
      })
      console.log("in onLoad promise:", this.data)
    })
  },

  getDataByPromise: function (coll_name, search_cond) {
    var promise = new Promise((resolve, reject) => {
      var that = this;
      const db = wx.cloud.database();
      db.collection(coll_name).where(search_cond).get({
        success: function (res) {
          console.log("in promise info:", res.data)
          resolve(res.data)
        },
        error: function (e) {
          console.log(e)
          reject("查询数据库失败")
        }
      });
    });
    return promise;
  },

  process_data: function(data){
    console.log("in onLoad callback:", this.data)
  },
  getDbData: function (coll_name, search_cond, data_key, cb) {
    const db = wx.cloud.database()
    var that = this;
    var ready_data = {};
    db.collection(coll_name).where(search_cond).get({
      success: function (res) {
        ready_data[data_key] = res.data;
        that.setData(ready_data);
        console.log("查询数据库完成:", that.data, res.data);
        cb(that.data)
      }
    })
  }
})

Search

    Table of Contents