zoukankan      html  css  js  c++  java
  • 小程序之纯粹callback回调、promise和async、await区别以及用法

    纯粹callBack和promise区别

    1、纯粹的callBack回调因为剥夺了函数的回调能力,所以当函数的调用层数很多的时候,需要层层传递callBack

    2、promise不需要层层传递callBack,因为它使函数具备了return的能力

    3、对于多个异步需要合并的情况下,用纯粹的callback 是相当麻烦的,但是promise很好的解决这个问题

    4、promise是一个对象,不同于函数,对象能保留状态,而函数在被调用需要马上返回状态(闭包函数除外)

    promise基础用法

    1、new 一个promise对象

    2、异步代码写在promise的函数中

    3、promise接受两个参数,一个resolve(已成功),一个reject(已失败)

    4、promise有三种状态pendding(进行中,当new了promise就是pendding的状态)、fulfilled(已成功)、rejected(已失败),当成功的时候调用resolve将状态改为已成功,当失败的时候调用reject将状态改为已失败,一旦状态发生改变之后,状态就凝固了,后面就无法改变状态了,成功会将成功的数据返回,失败会将失败的信息返回。

    5、在需要获取数据的地方通过promise.then()的方式获取,这里面接受两个参数,都是匿名函数,第一个是接受成功的函数,第二个是失败时候的函数

    const promise = new Promise((resolve, reject)=>{
      wx.getSystemInfo({
        success: (res)=>{
          resolve(res)
        },
        fail: (error)=>{
          reject(error)
        }
      })
    });
    
    promise.then((res)=>{
      //获取成功的结果,res中存着获取成功时的数据
      console.log(res)
    },(error)=>{
      // 获取数据失败时
      console.log(error)
    })

    6、es6的写法,如果函数只有一个参数的话,括号不需要,如果括号中只有一行代码,花括号可以不需要

    promise.then((res)=>{
      //获取成功的结果,res中存着获取成功时的数据
      console.log(res)
    },(error)=>{
      // 获取数据失败时
      console.log(error)
    })
    
    const promise1 = new Promise((resolve, reject)=>{
      wx.getSystemInfo({
        success: res=> resolve(res),
        fail: error=> reject(error)
      })
    });
    
    promise1.then(
      res=> console.log(res),
      error=> console.log(error)
    )

    promise多异步任务合并用法(promise.all promise.race)

    promise.all 是多有的请求全部返回才能回调

    promise.race 是多个请求中只要有一个请求完成回调即返回,返回的是最先回调的结果

    onLoad: function (options) {
        wx.showLoading();
        const bid = options.bid
        const detail = bookModel.getDetail(bid);
        const comments = bookModel.getComments(bid);
        const likeStatus = bookModel.getLikeStatus(bid)
        // Promise.all 要等所有请求全部返回才能回调 还有一个 .race 只要有一个子请求完成就回调,回调的是竞争成功的回调结果也就是完成的
        Promise.all([detail, comments, likeStatus])
        .then(res=>{
          this.setData({
            book: res[0],
            comments: res[1].comments,
            likeStatus: res[2].like_status,
            likeCount: res[2].fav_nums
          })
          wx.hideLoading()
        })
      }

    async、await基础用法

    1、async和await使得异步请求操作变得  “同步化”,其使得异步和同步一样直接返回一个结果,返回的成功失败,数据的获取直接从保存结果的变量中去判断以及取结果

    2、async和await一般成对出现,任何一个离开了,另外一个都活不下去

    3、async和await的使用,是基于promise,并且async返回的也是一个promise对象

    timeout(ms){
        return new Promise(resolve=>{
          setTimeout(resolve, ms)
        })
      }
    
      async asyncPrint(){
        await this.timeout(123)
        console.log(11)
      }
  • 相关阅读:
    二叉排序树
    安全的终止线程的两种方法
    图的广度优先遍历(BFS)
    图的深度优先遍历(DFS)
    volatile的应用
    二叉树的遍历
    Java-反射
    Java--泛型
    单例模式
    剑指Offer--对称二叉树
  • 原文地址:https://www.cnblogs.com/dgxblogs/p/11492030.html
Copyright © 2011-2022 走看看