1. 程式人生 > >微信小程式使用async/await函式進行非同步程式設計

微信小程式使用async/await函式進行非同步程式設計

早些時候,研究了一下前端非同步程式設計,想著使用async/await函式編寫非同步程式碼,簡直爽的不要不要的,而我本身是做小程式開發的,所有自然希望能夠讓async/await函式在小程式中大展拳腳了,這裡就簡單介紹一下如何在微信小程式中使用async/await函式來編寫非同步程式碼。

微信小程式本身支援es6的語法,並且可以開啟Babel將es6轉為es5。但是即使開啟了語法編譯,在你使用async函式時,還是會報如下錯誤:

regeneratorRuntime is not defined;at pages/index/index page lifeCycleMethod onLoad function
ReferenceError: regeneratorRuntime is not defined

我們知道babel在編譯時,並不是支援所有的es6語法的,所以需要一些外掛來對babel進行擴充套件,而這個regeneratorRuntime他其實就是一個對Generator、async函式提供的一種語法支援的外掛。既然它提示regeneratorRuntime沒有定義,那麼我們就可以手動從npm下載regenerator-runtime這個包。然後,我們再將下載好的包丟到我們的小程式中的,然後在每個需要使用async函式的地方,使用以下程式碼:

// 以下是es6的模組化寫法,你也可以使用require,一樣的。注意路徑和js檔案,不要引用錯了。
import regeneratorRuntime from '/utils/regenerator-runtime/runtime-module.js';

如果你嫌棄寫這麼長,你可以定義一個vendor.js功能js檔案,然後在這個檔案中暴露regeneratorRuntime模組,然後每次都這樣引用即可:

import { regeneratorRuntime } from '/utils/vendor.js';

但是,不管怎麼樣,你都需要在使用async函式的地方引入他,並且,命名必須是regeneratorRuntime,不要搞錯了。

如果你嫌棄每次寫個專案都要複製一份regeneratorRuntime模組,那第二個方法那就是使用微信小程式新增的npm功能那麼直接把包下載下來然後構建一下就可以直接用,而且,路徑都不需要找了,直接和node中使用模組一樣的使用方式。怎麼用呢?這個......好像又要花篇幅來介紹怎麼使用微信小程式的npm了。有點麻煩,要不,如果你想要了解微信小程式如何構建npm的,那直接看我這一篇文章吧:

微信小程式的npm使用心得:https://blog.csdn.net/qq_33024515/article/details/85164314