小程序之純粹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)
  }