關於微信小程式的非同步處理

不言
發布: 2018-06-27 13:49:21
原創
1992 人瀏覽過

這篇文章主要為大家詳細介紹了微信小程式非同步處理的相關資料,具有一定的參考價值,有興趣的夥伴們可以參考一下

本文實例為大家分享了微信小程式非同步處理的具體方法,供大家參考,具體內容如下

直接看問題:

#然後看列印的結果:

根據上面兩圖可以看出,程式碼上先執行的網路請求,再執行列印的變量,但是從下面列印的結果來看,先出結果的是執行列印變數的函數(aafn函數),再印出網路請求success的回呼裡傳回的資料和賦值後的變數的值;

為什麼先執行的aafn,並且列印的值沒有賦值上?

因為wx.request是一個非同步的請求,所以資料請求的同時,可以繼續向下執行函數。所以這裡值還沒賦值上就開始印了變數的值;

這種情況,要怎麼解決呢?

方法一:

巢狀

在wx.request的success回呼裡執行aafn函數

然後執行結果

#這裡就取到值了

但是如果邏輯很複雜,需要用到很多層異步,就像這樣:

asyncFn1(function(){
 //...
 asyncFn2(function(){
  //...
  asyncFn3(function(){
   //...
   asyncFn4(function(){
    //...
    asyncFn5(function(){
      //...
    });
   });
  });
 });
});
登入後複製

這樣程式碼看起來就很不好看,程式碼的可讀性和可維護性就不好了

那要怎麼解決這個問題呢? Promise這種概念的產生,很好地解決了這一切,Promise是什麼?這裡我就不多說了有興趣的自己去看一看,Promise介紹連結

先看看Promise的方式:

function asyncFn1(){
 return new Promise(function (resolve, reject) {
  //...
 })
}

// asyncFn2,3,4,5也实现成跟asyncFn1一样的方式...
登入後複製

呼叫

asyncFn1()
 .then(asyncFn2)
 .then(asyncFn3)
 .then(asyncFn4)
 .then(asyncFn5);
登入後複製

這樣的話,非同步函數就可以依序執行了

微信小程式的非同步API怎麼支援Promise呢?我們可以一個一個的用Promise去包裝這些API,但這個還是比較麻煩的。不過,小程式的API的參數格式都比較統一,只接受一個object參數,回呼都是在這個參數中設置,所以,這為了統一處理提供了便利,寫一個工具方法,來完成這樣的工作

首先需要引用一個叫bluebird.js的檔案;

進入bluebird官網下載:


##這個好像是不能下載的,但是你可以點擊進入,然後複製,在小程式裡創建一個js文件,將程式碼複製到這個js裡面,然後引用。

然後再寫一個JS,裡面寫工具方法:

#下面是prom.js

接著需要使用的那個頁面的js裡引入prom.js:


#列印結果

這樣就可以了,完結。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

微信小程式中支付後呼叫SDK的非同步通知及驗證處理訂單方法

微信小程式page的生命週期及音訊播放及監聽的介紹

#

以上是關於微信小程式的非同步處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!