上回寫到:
沒看上回的同學,在這裡:在微信小程式中使用
async/await
function wxPromisify(fn) { return async function(args) { return new Promise((resolve, reject) => { fn({ ...(args || {}), success: res => resolve(res), fail: err => reject(err) }); }); }; } export function toAsync(names) { return (names || []) .map(name => ( { name, member: wx[name] } )) .filter(t => typeof t.member === "function") .reduce((r, t) => { r[t.name] = wxPromisify(wx[t.name]); return r; }, {}); }
// pages/somepage/somepage.jsimport { toAsync } = require("../../utils/async"); // ...const awx = toAsync(["login", "request"]);await awx.login();await awx.request({...});
這不已經封裝過了嗎?
這回寫的是不一樣的封裝。因為,一個小程式裡要寫好多個 toAsync 調用,真的很煩吶!
能不能一次封裝,到處呼叫?能!把所有用到的方法都在初始化的時候就封裝起來。可是,難免會有遺漏。
能不能一次封裝,到處調用,還不需要初始化?
能!祭出Proxy 大神:
// utils/asyncjsfunction wxPromisify(fn) { ... } // 前面已经定义过了export function asyncProxy(target) { return new Proxy(target, { cache: {}, get(it, prop) { const aFn = this.cache[prop]; if (aFn) { return aFn; } const v = it[prop]; if (typeof v !== "function") { return v; } return this.cache[prop] = wxPromisify(v); } }); }
// app.jsimport { asyncProxy } from "./utils/async"; App({ onLaunch: function() { wx.awx = asyncProxy(wx); // .... } })
// pages/somepage/somepage// ...const { awx } = wx;await awx.login();await awx.request({...});
解釋:
因為 awx 是代理的 wx 對象,調用 awx.login() 的時候,實際是先調用代理的 get(wx, "login" ),找出用來代替 wx.login 的東西。
根據上述程式碼裡的邏輯,先從 cache 裡找使用 wxPromisify() 封裝的結果,若有,直接回傳;若沒有,先封裝成 Promise 網路的函數,存入 cache,再回傳。
直覺一點描述,大概是這樣:
awx.login(); ^^^^^^ get(wx, "login")
推薦教學:《微信公眾號》
以上是Proxy封裝小程式的非同步調用的詳細內容。更多資訊請關注PHP中文網其他相關文章!