首頁 微信小程式 小程式開發 關於微信小程式的非同步處理

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

Jun 27, 2018 pm 01:49 PM
非同步處理 微信小程式

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

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

直接看問題:

#然後看列印的結果:

根據上面兩圖可以看出,程式碼上先執行的網路請求,再執行列印的變量,但是從下面列印的結果來看,先出結果的是執行列印變數的函數(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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1677
14
CakePHP 教程
1431
52
Laravel 教程
1334
25
PHP教程
1281
29
C# 教程
1257
24
閒魚微信小程式正式上線 閒魚微信小程式正式上線 Feb 10, 2024 pm 10:39 PM

閒魚官方微信小程式悄悄上線,在小程式中可以發布閒置與買家/賣家私訊交流、查看個人資料及訂單、搜尋物品等,有用好奇閒魚微信小程式叫什麼,現在快來看一下。閒魚微信小程式叫什麼答案:閒魚,閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能;3、想要使用的話必要要開通微信支付才可以購買;

實現微信小程式中的圖片濾鏡效果 實現微信小程式中的圖片濾鏡效果 Nov 21, 2023 pm 06:22 PM

實現微信小程式中的圖片濾鏡效果隨著社群媒體應用程式的流行,人們越來越喜歡在照片中應用濾鏡效果,以增強照片的藝術效果和吸引力。在微信小程式中也可以實現圖片濾鏡效果,為使用者提供更多有趣和創意的照片編輯功能。本文將介紹如何在微信小程式中實現圖片濾鏡效果,並提供具體的程式碼範例。首先,我們需要在微信小程式中使用canvas元件來載入和編輯圖片。 canvas元件可以在頁面

實作微信小程式中的下拉式選單效果 實作微信小程式中的下拉式選單效果 Nov 21, 2023 pm 03:03 PM

實現微信小程式中的下拉式選單效果,需要具體程式碼範例隨著行動互聯網的普及,微信小程式成為了網路開發的重要一環,越來越多的人開始關注和使用微信小程式。微信小程式的開發相比傳統的APP開發更加簡單快捷,但也需要掌握一定的開發技巧。在微信小程式的開發中,下拉式選單是一個常見的UI元件,實現了更好的使用者操作體驗。本文將詳細介紹如何在微信小程式中實現下拉式選單效果,並提供具

閒魚微信小程式叫什麼 閒魚微信小程式叫什麼 Feb 27, 2024 pm 01:11 PM

閒魚官方微信小程式已經悄悄上線,它為用戶提供了一個便捷的平台,讓你可以輕鬆地發布和交易閒置物品。在小程式中,你可以與買家或賣家進行私訊交流,查看個人資料和訂單,以及搜尋你想要的物品。那麼閒魚在微信小程式中究竟叫什麼呢,這篇教學攻略將為您詳細介紹,想要了解的用戶們快來跟著本文繼續閱讀吧!閒魚微信小程式叫什麼答案:閒魚,閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能;3、

微信小程式實現圖片上傳功能 微信小程式實現圖片上傳功能 Nov 21, 2023 am 09:08 AM

微信小程式實現圖片上傳功能隨著行動網路的發展,微信小程式已經成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應用場景,還支援開發者自訂功能,其中包括圖片上傳功能。本文將介紹如何在微信小程式中實作圖片上傳功能,並提供具體的程式碼範例。一、前期準備工作在開始編寫程式碼之前,我們需要先下載並安裝微信開發者工具,並註冊成為微信開發者。同時,也需要了解微信

如何調試 PHP 函數中非同步處理問題? 如何調試 PHP 函數中非同步處理問題? Apr 17, 2024 pm 12:30 PM

如何調試PHP函數中的非同步處理問題?使用Xdebug設定斷點並檢查堆疊追蹤,尋找與協程或ReactPHP元件相關的呼叫。啟用ReactPHP偵錯訊息,查看額外的日誌訊息,包括異常和堆疊追蹤。

使用微信小程式實現輪播圖切換效果 使用微信小程式實現輪播圖切換效果 Nov 21, 2023 pm 05:59 PM

使用微信小程式實現輪播圖切換效果微信小程式是一種輕量級的應用程序,具有簡單、高效的開發和使用特點。在微信小程式中,實作輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程式實現輪播圖切換效果,並給出具體的程式碼範例。首先,在微信小程式的頁面檔案中,新增一個輪播圖元件。例如,可以使用<swiper>標籤來實現輪播圖的切換效果。在該組件中,可以透過b

實現微信小程式中的圖片旋轉效果 實現微信小程式中的圖片旋轉效果 Nov 21, 2023 am 08:26 AM

實現微信小程式中的圖片旋轉效果,需要具體程式碼範例微信小程式是一種輕量級的應用程序,為用戶提供了豐富的功能和良好的用戶體驗。在小程式中,開發者可以利用各種元件和API來實現各種效果。其中,圖片旋轉效果是一種常見的動畫效果,可以為小程式增添趣味性和視覺效果。在微信小程式中實作圖片旋轉效果,需要使用小程式提供的動畫API。以下是一個具體的程式碼範例,展示如何在小程

See all articles