小程序不同页面的异步回调,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方法作为一个参数传递进去的目的,就是为了下面的回调。

9aa52cd9d52dfe808e8243f7bc17ea94.jpg

我们这个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)
    })
  },
})
相关文章
|
10天前
|
存储 前端开发
除了 Promise.all(),还有哪些方法可以处理异步并发操作?
在上述示例中,`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数,通过手动控制并发执行的Promise数量,实现了对异步操作的并发控制,并在所有Promise完成后返回结果数组。
|
10天前
|
前端开发 JavaScript
如何使用 Promise 处理异步并发操作?
通过使用 `Promise.all()` 和 `Promise.race()` 方法,可以灵活地处理各种异步并发操作,根据不同的业务需求选择合适的方法来提高代码的性能和效率,同时也使异步代码的逻辑更加清晰和易于维护。
|
7天前
|
前端开发 数据处理
如何使用 Promise.all() 处理异步并发操作?
使用 `Promise.all()` 可以方便地处理多个异步并发操作,提高代码的执行效率和可读性,同时通过统一的 `.catch()` 方法能够有效地处理异步操作中的错误,确保程序的稳定性。
|
11天前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
10天前
|
前端开发 JavaScript 开发者
用 Promise 处理异步操作的优势是什么?
综上所述,使用Promise处理异步操作能够有效地解决传统回调函数带来的诸多问题,提高代码的质量、可读性、可维护性和可扩展性,是JavaScript中进行异步编程的重要工具和技术。
|
30天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
46 1
|
1月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
15 0
|
2月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
65 1
|
6月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
99 4