返回舊版| 微信建站| 我要建站 | 建站學習 | 加入收藏
小程序當前位置:首頁 > cms教程 > 小程序 > 正文

小程序首頁加載之前加載其他相關資源或配置(小程序的promise應用)

發布時間:2019-07-12 18:13:35   來源:   點擊:
我的小程序全是對接的cms,為了方便欄目的調用,我都是先進行加載所有的欄目,然后存儲到緩存里邊,這樣小程序的首頁就可以直接通過該欄目緩存調用欄目或者子欄目信息,欄目屬于不常更改的內容,提前緩存欄目算是一個好的辦法。

但是實際應用中當中,小程序開發者工具api請求比較快,所以一般看不出什么問題,但是真機預覽或者上線之后,用戶的網速往往沒有那么快,這就造成了首頁加載完之后,可能這個請求欄目的api還沒有返回結果,造成欄目報錯,首頁出現空白的情況。

這時候就需要考慮es6的新語法Promise了,簡單來說,Promise的作用就是等待一個請求結束之后才會繼續執行后邊的程序。具體解釋為:

Promise 是異步編程的一種解決方案,其實是一個構造函數,自己身上有all、reject、resolve這幾個方法,原型上有then、catch等方法。

Promise對象有以下兩個特點。

(1)對象的狀態不受外界影響。Promise對象代表一個異步操作,有三種狀態:pending(進行中)、fulfilled(已成功)和rejected(已失敗)。只有異步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。

(2)一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀態改變,只有兩種可能:從pending變為fulfilled和從pending變為rejected。只要這兩種情況發生,狀態就凝固了,不會再變了,會一直保持這個結果,這時就稱為 resolved(已定型)。如果改變已經發生了,你再對Promise對象添加回調函數,也會立即得到這個結果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監聽,是得不到結果的。


應用到小程序中則為:

(1)首先 在app.js中創建一個Promise實例,如下:

  1. get_cat(e) { 
  2.             var that = this
  3.         var CATEGORYS = swan.getStorageSync('categorys'
  4.         return new Promise(function (resolve, reject) { 
  5.             if (CATEGORYS != '' || CATEGORYS.length != 0) { 
  6.                 resolve(CATEGORYS);//如果有欄目緩存直接調用 
  7.             } else {//如果沒有欄目緩存,請求API 
  8.                 swan.request({ 
  9.                     url: that.globalData.api.category, 
  10.                     data: { 
  11.                         wxid: that.globalData.wxid 
  12.                     }, 
  13.                     method: 'GET'
  14.                     header: { 
  15.                         'content-type''application/json'// 默認值 
  16.                         'x-appsecret': that.globalData.appsecret 
  17.                     }, 
  18.                     success: function (res) { 
  19.                         const categorys = res.data[0]; 
  20.                         swan.setStorageSync('categorys', categorys) 
  21.                         resolve(categorys);//請求成功之后返回resolve 
  22.                     }, 
  23.                     fail(e) { 
  24.                         reject();//請求失敗之后返回reject 
  25.                         console.log('獲取欄目緩存失敗,請重試'); 
  26.                     } 
  27.                 }) 
  28.             } 
  29.         }) 
  30.     }, 

(2)在index.js中,如果某個方法必須要欄目請求之后調用,那么我們就可以

  1. app.get_cat().then(function(){ 
  2.      that.get_newslist()//調用新聞方法 
  3. }); 

這樣,get_newslist方法中如果用到了緩存,就會先等等欄目緩存加載完成之后再請求api,這樣就不會報錯,

此時又出現另外一個問題,就是,如果Promise對象確實請求時間比較長,那么會造成首頁一直屬于空白中,此時可以弄個加載頁面,提示用戶正在加載中,一旦get_newslist請求完成之后,隱藏該提示,正常顯示文章即可!

  1. <view hidden="{{loading1}}" class="loading"
  2.         <image src="../../images/loading.gif" mode='widthFix' style="width:120px; height:120px;"></image> 
  3.         <view>小程序加載中...</view> 
  4.    </view> 

版權所有:鄭州騰石網絡科技有限公司 備案信息:豫ICP備18019117號
站長QQ:2863868475 業務合作咨詢:15137100750(同微信)
本站所有投放的廣告是有其他網站提供,不代表本站立場,同時網站首頁廣告位對外出租詳情咨詢本站站長!同時歡迎廣大站長加入個人建站團隊
  • 建站客服
  • CMS仿站
  • CMS學習
  • 技術交流群:336572814
棋牌app源码 快乐十分结果查询 4887铁算盤开奖结果 新时时走势分析 重庆时时开彩结果今天 四川快乐12最大遗漏 赛车pk官网 八仙过海3d预测直选 2013香港历史开奖记录 体彩20选5走势图浙江风采网 香港正挂挂牌彩图114期