Proxy封裝小程式的非同步調用

hzc
發布: 2020-06-05 10:00:09
轉載
2970 人瀏覽過

上回寫到:

沒看上回的同學,在這裡:在微信小程式中使用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中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板