實現wx小程式API的 Promise化
- 基於回撥函式的非同步 API 的缺點
預設情況下,小程式官方提供的非同步 API 都是基於回撥函式實現的,例如,網路請求的 API 需要按照
如下的方式呼叫:
wx.request({
method: '',
url: '',
data: {},
success: () => {}, // 成功的回撥
complate: () => {}, // 無論成功與否都會執行的回撥
fail: () => {} // 失敗的回撥
})
這種程式碼的缺點是顯而易見的, 容易造成回撥地獄的問題,程式碼的可讀性、維護性差!而我們就想將這
種型別的程式碼使用 API Promise 化進行改造。
2. 什麼是 API Promise 化
API Promise 化,指的是通過額外的配置,將官方提供的、基於回撥函式的非同步 API ,升級改造為基
於 Promise 的非同步 API ,從而提高程式碼的可讀性、維護性,避免回撥地獄的問題。
3. 實現 API Promise 化
在小程式中,實現 API Promise 化主要依賴於 miniprogram-api-promise 這個第三方的 npm 包。
它的安裝和使用步驟如下:
npm i --save miniprogram-api-promise@1.0.4
- 下載完成,我們不能直接使用,而是需要再次重新構建npm包
- 建議在構建前先刪除原有的miniprogram_npm
- 然後再點選工具,構建npm
匯入並執行:
// 在小程式入口檔案中(app.js),只需要呼叫一次 promisifyAll()方法
// 即可實現非同步API 的Promise化
// 按需匯入一個方法
import { promisifyAll } from 'miniprogram-api-promise'
// 宣告一個常量,為一個空物件,
// 並在wx頂級物件下新增一個屬性p也指向該空物件,使所有成員都可以使用該物件
const wxp = wx.p = {}
// promisify all wx's api
// 引數1: wx頂級物件
// 引數2: wxp指向一個空物件
promisifyAll(wx, wxp)
解釋上述程式碼:
promisifyAll : 做的事就是將 wx 擁有的屬性方法都copy並改造了一份給了 wxp 這個物件。
然而, wxp 只是當前 js 檔案的一個常量,只能在當前檔案使用。
因此:我們在 wx 上掛載一個屬性 p 讓他和 wxp 指向同一個空物件。
在其他頁面或者元件就可以通過全域性物件 wx 點出 p 來訪問到 wxp。
此時 wx.p 發起非同步的請求時,得到的是一個 promise 物件。
那麼我們就可以使用 async/await 簡化Promise語法。
相關文章
- 微信小程式如何呼叫API實現資料請求-wx.request()微信小程式API
- 小程式API進行promise封裝APIPromise封裝
- 用Promise實現小程式介面鏈式呼叫Promise
- 小程式wx.canIUse和wx.getSystemInfo踏的坑
- promise封裝wx.request()Promise封裝
- Promise 程式碼實現Promise
- 微信小程式 wx.request 的封裝微信小程式封裝
- 使用promise封裝wx.request()Promise封裝
- jsonp 的原理和採用 Promise API 的實現JSONPromiseAPI
- 微信小程式wx.request的簡單封裝微信小程式封裝
- 微信小程式 wx.request統一呼叫微信小程式
- 使用 Promise.withResolvers() 來簡化你將函式 Promise 化的實現~~Promise函式
- 小程式國際化實現方式
- 50行不到實現Promise化的jsonpPromiseJSON
- 微信小程式元件化(下):程式碼實現微信小程式元件化
- 小程式wx.request()方法簡單封裝封裝
- 實現自己的promisePromise
- Promise 方法的實現Promise
- Promise實現Promise
- Promise的api整理PromiseAPI
- 小程式點睛之一:如何將小程式非同步回撥介面 Promise 化非同步Promise
- 小程式 · wx.showActionSheet在安卓無取消按鍵安卓
- 小程式 二次封裝wx.request方法封裝
- 微信小程式通過wx.makePhoneCall打電話微信小程式
- 微信小程式元件化解決方案wx-component微信小程式元件化
- 我用釦子API做了個小程式,實現財務自由API
- Promise是如何實現非同步程式設計的?Promise非同步程式設計
- 小程式api的promisefyAPIPromise
- Promise的實現及解析Promise
- promise的模擬實現Promise
- Promise的實現(step by step)Promise
- Promise的簡單實現Promise
- uni-app使用wx-canvas實現微信小程式上顯示地圖map和座標geoAPPCanvas微信小程式地圖
- Promise核心實現Promise
- 學習Promise && 簡易實現PromisePromise
- Android實現模組 api 化AndroidAPI
- 微信小程式之wx.navigateTo不跳轉問題微信小程式
- JavaScript Promise APIJavaScriptPromiseAPI