實現一個功能就是點進詳情頁的時候,頁面會出現載入的動畫,等到頁面的資料請求結束後,載入動畫消失:

這邊的載入動畫,我們可以用到小程式自帶的方法

顯示載入:wx.showLoading()

隱藏載入:wx.hideLoading()

那麼該如何判斷請求結束後,隱藏掉載入的動畫呢?

可以採用 promise.all方法可以把多個promise例項合併為一個

 /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    //展示載入
    wx.showLoading()
    //page接收外部傳過來的id  從而進入Id對應的詳情頁
    const bid = options.bid;//從元件那邊接到bid 
    const detail = bookModel.getDetail(bid);

    const comments = bookModel.getComments(bid);
    const likeStatus = bookModel.getLikeStatus(bid);

    //並行請求  -- detail comments  likeStatus
    Promise.all([detail,comments,likeStatus]).then((res)=>{
      this.setData({
        //將下面三個請求 並行到一起
        book:res[0],
        comments:res[1].comments,
        likeStatus:res[2].like_status,
        likeStatus:res[2].fav_nums
      })
      wx.hideLoading()
    })

  },
  
})
 

我們著重看這段程式碼:promise.all將三個promise請求合併到一起,也就是並行請求,

首先點選詳情頁的時候,肯定是獲取到對應的Id,然後呼叫每個model下面的方法並傳入引數詳情頁的id

然後並行請求,請求結束後就可以隱藏載入的動畫,程式碼的講解都在註釋中!

promise.all是等待所有的子promise全部執行完成之後,才會觸發回撥函式