评论

小程序不同页面的异步回调,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里定义如下方法
  • 然后再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)
    })
  },
})
点赞 8
收藏
分享 评论

7 个评论

  • Api调用师
    Api调用师
    2022-03-11

    看下这个库,完美解决类似异步问题 https://developers.weixin.qq.com/community/develop/article/doc/00002ac57208f0e7335d111f156013

    2022-03-11
    赞同 1
    回复
  • 2019-11-15
    result 就是回调函数名,被callbackgetdata函数当做变量带去了App.js里 result函数在callbackgetdata得到res后 把res当参数(写法 result(res) )回调到页面js里面去打印出来
    2019-11-15
    赞同 1
    回复 2
    • 编程小石头
      编程小石头
      2019-11-15
      对的
      2019-11-15
      回复
    • gl
      gl
      2023-10-03
      result为什么不是参数名呢?如果写成app.callBackGetData(function() {console.log(“dataList”,“”)})这种形式,那么函数名是什么?
      2023-10-03
      回复
  • 叽里咕噜
    叽里咕噜
    2023-12-15

    简单易懂,非常详细,学会了,大大的感谢

    2023-12-15
    赞同
    回复
  • 相
    2020-05-13

    调用多个变量怎么办?

    2020-05-13
    赞同
    回复
  • 😄
    😄
    2020-02-18

    我在云函数里面用promise 用法也是一样吗?

    2020-02-18
    赞同
    回复
  • kevin
    kevin
    2019-11-21

    我踩的一个大坑,就是这个Promise,谢谢!

    2019-11-21
    赞同
    回复
  • kevin
    kevin
    2019-11-21

    我踩的一个大坑,就是这个Promise,谢谢!

    2019-11-21
    赞同
    回复
请 登录 后发表内容

玻璃钢生产厂家玻璃钢雕塑价格制作厂江苏欧式玻璃钢雕塑南通设计玻璃钢雕塑费用广东常用商场美陈多少钱辽源玻璃钢人物雕塑玻璃钢土炮雕塑秦淮新年商场美陈晋城学校玻璃钢仿铜雕塑公司兰州卡通玻璃钢雕塑厂家湖南玻璃钢花盆造型玻璃钢景观雕塑制作公司南城玻璃钢花盆价格商场品牌美陈宁德玻璃钢座椅雕塑贵安新区玻璃钢雕塑定做欧式玻璃钢卡通雕塑厂家现货商场美陈巡检工作汕头玻璃钢雕塑生产厂家郑州景观玻璃钢彩绘雕塑小品云南现代人物玻璃钢雕塑家居商场卫生间美陈银川卡通玻璃钢雕塑安装制作玻璃钢花盆模具河北装饰商场美陈报价质量好的玻璃钢雕塑品质玻璃钢雕塑哪里买南通玻璃钢花盆生产厂四川通道商场美陈销售广东玻璃钢雕塑项目经理招聘青海仿铜玻璃钢雕塑定做香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化