本博客所有文章采用的授权方式为 自由转载-非商用-非衍生-保持署名 ，转载请务必注明出处，谢谢。
声明：
本博客欢迎转发,但请注明出处，保留原作者信息
博客地址：孟阿龙的博客
所有内容为本人学习、研究、总结。如有雷同，实属荣幸
背景
近期，因为工作需要在研究微信小程序。
微信小程序基本是通过Javascript+css+wxml(类html)组合而成。对于精通前端技术的人来说，javascript中的promise、callback应该是非常熟悉了，但是对于javascript小白来说，这类技术还是需要研究。本文即是对javascript中的这两个概念的具体应用进行举例分析。
需求
小程序中的主体逻辑是用js实现的，并且小程序中大部分网络交互的接口实现都是异步的，因此在写小程序时，不可避免的就必须和异步进行打交道。接下来举个简单的例子，来看看callback和promise在异步接口中的应用。
需求举例：
- 首先我在数据库的medicine表中插入了3条药品信息记录，每条记录简单的包含药品的一些基础信息。
- 在小程序中，我们需要从medicine表中查出所有药品记录进行展示
解决方案：
- 传统的方案，我们写个同步接口，先查数据库再进行数据输出即可
- 但是在小程序中，微信提供的数据库访问接口都是异步的，因此不能用简单的同步模式写代码，这时就需要使用callback或者promise
实现方案1：传统同步模式
按照同步模式的理解，以上代码第8行，调用this.getDbData函数查询数据库，在函数内将查询结果赋值给全局变量data中的medicine中，并输出查询结果
-
第9行，在调用了getDbData函数之后，再输出变量data的内容，发现medicine变量并没有被赋值，如下图
image.png 从上边的执行结果可以看到，第9行先执行了，getDbData中的输出还后执行了
这就是因为getDbData中调用数据库的接口，在微信API中是异步实现的，因此要想实现查询获取了相关数据之后，再对数据做进一步处理就需要使用callback机制或者promise
实现方案2：callback模式改造
- 如上，在第8行增加了this.process_data作为callback传入getDbData函数中
- 第12~14行，是callback函数的定义，并在该函数中输出相关全局变量的内容
-
第25行，是执行完数据库查询并且完成全局变量赋值之后，将全局变量传给callback函数并调用，整体执行结果如下：
image.png
实现方案3：promise模式改造
- 如上，第15行重新定义了promise模式的函数，getDataByPromise返回的是一个promise对象
-
在第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)
}
})
}
})
