小程序不同页面的异步回调，callback和promise的使用讲解
发个扫盲贴，大神请绕道。最近好多同学问我如何再请求数据成功后直接使用数据。我们通常的做法就是在请求成功后，再调用我们定义的方法，进而使用数据。如下代码
[代码] onLoad() {
let that=this
wx.cloud.database().collection("users").get({
success(res) {
that.setData(res.data)
},
fail(res) {
}
})
},
showData(dataList) {
//.........做数据处理
},
[代码]
我们这样写其实也没什么不对，但是如果数据请求和使用是在两个不同的页面呢。 比如我们在app.js里请求位置，获取用户信息。然后在首页index.js里要使用这些数据，那么我们这么写就有问题了。下面就来教大家两种方式来很好的解决这个问题。
一，通过callback回调。
先看下代码，然后我再具体给大家讲解下原理。
app.js里定义如下方法
[图片]
然后再index.js 里这么使用
[图片]
这时候，其实就可以看到了，我们在首页index.js里调用了app.js里的请求数据的方法，并且可以在index.js里直接使用数据。
原理讲解
原理其实很简单，就是我们在app.js里的获取数据的方法里定义一个参数。而这个参数和普通参数唯一不同的地方，就是这个参数是个function方法
[图片]
我们上图的callback参数，其实就是下图 function(result){}
[图片]
把function方法作为一个参数传递进去的目的，就是为了下面的回调。
[图片]
我们这个callBack参数，可以在请求数据成功或者失败的时候作为一个方法调用。这样就可以把请求到的数据，回传回去了。
讲的有点绕，不知道大家有没有被绕晕。这在java开发中，其实就相当于监听者模式。说白了就是在一个页面里监听另外一个页面的动作，如获取数据成功，当监听到数据获取成功这个动作以后，就可以直接把数据回传回来了。
如果觉得这种方法有点绕，不好使用，我们就用下面的这个第二种方式。
二，promise
promise的好处就是可以不用那个层层传递，不用那么绕。 还是先看代码，后面结合代码给大家讲下原理
app.js里定义如下方法
[图片]
index.js里这么调用
[图片]
用句通俗的话说，就是通过promise让我们的数据请求和使用看上去是在同一个页面完成。怎么实现的呢
1，在app.js里把数据请求封装到promise里，然后把promise返回到我们的首页index.js里
2，在首页里使用这个promise 实现数据的获取和使用。
在具体些就是下面这几步
promise基础用法
[图片]
1、new 一个Promise对象
2、请求数据的异步代码写在promise的函数中
3、promise接受两个参数，一个resolve(已成功success)，一个reject(已失败fail)
4、promise有三种状态pendding(进行中，当new了promise就是pendding的状态)、fulfilled(已成功)、rejected(已失败)，当成功的时候调用resolve将状态改为已成功，当失败的时候调用reject将状态改为已失败，一旦状态发生改变之后，状态就凝固了，后面就无法改变状态了，成功会将成功的数据返回，失败会将失败的信息返回。
5、在需要获取数据的地方通过promise.then()的方式获取，这里面接受两个参数，都是匿名函数，第一个是接受成功的函数，第二个是失败时候的函数
[图片]
好了，到这里我们两种不同页面的异步回调就给大家将完了。代码就完整的给大家贴出来吧，方便大家日后使用
app.js
[代码]//app.js
App({
//第二种，通过promise
promiseGetData() {
let promise = new Promise(function(success, fail) {
wx.cloud.database().collection("users").get({
success(res) {
success(res)
},
fail(res) {
fail(res)
}
})
})
return promise;
},
//第一种，通过callback的方式来实现回调
callBackGetData(callBack) {
wx.cloud.database().collection("users").get({
success(res) {
callBack(res)
},
fail(res) {
callBack(res)
}
})
},
})
[代码]
index.js
[代码]// 异步调用，callback
const app = getApp()
Page({
clickBtn() { //按钮点击
//callback方式
// app.callBackGetData(function(result) {
// console.log("dataList", result)
// })
//promise方法
let promise = app.promiseGetData()
promise.then((res) => { //获取成功的结果，res中存着获取成功时的数据
console.log("成功", res)
}, (error) => { // 获取数据失败时
console.log("失败", error)
})
},
})
[代码]
