站点图标 起风网

小程序不同页面的异步回调,callback和promise的使用讲解

小程序不同页面的异步回调,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里的获取数据的方法里定义一个参数。而这个参数和普通参数唯一不同的地方,就是这个参数是个function方法

我们上图的callback参数,其实就是下图 function(result){}

把function方法作为一个参数传递进去的目的,就是为了下面的回调。

我们这个callBack参数,可以在请求数据成功或者失败的时候作为一个方法调用。这样就可以把请求到的数据,回传回去了。
讲的有点绕,不知道大家有没有被绕晕。这在java开发中,其实就相当于监听者模式。说白了就是在一个页面里监听另外一个页面的动作,如获取数据成功,当监听到数据获取成功这个动作以后,就可以直接把数据回传回来了。
如果觉得这种方法有点绕,不好使用,我们就用下面的这个第二种方式。

二,promise

promise的好处就是可以不用那个层层传递,不用那么绕。 还是先看代码,后面结合代码给大家讲下原理
app.js里定义如下方法

index.js里这么调用

用句通俗的话说,就是通过promise让我们的数据请求和使用看上去是在同一个页面完成。怎么实现的呢

promise基础用法

好了,到这里我们两种不同页面的异步回调就给大家将完了。代码就完整的给大家贴出来吧,方便大家日后使用

//app.jsApp({  //第二种,通过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)      }    })  },})
// 异步调用,callbackconst 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)    })  },})

文章转载于:https://www.jianshu.com/p/3ffdf87f1d5a

原著是一个有趣的人,若有侵权,请通知删除

退出移动版