這篇文章主要介紹Proxy封裝小程序中異步調(diào)用的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為洛浦等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及洛浦網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、洛浦網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

示例：

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({...});

這不已經(jīng)封裝過了嗎？

這回寫的是不一樣的封裝。因?yàn)?，一個(gè)小程序里要寫好多個(gè) toAsync 調(diào)用，真的很煩吶！

---

能不能一次封裝，到處調(diào)用？能！把所有用到的方法都在初始化的時(shí)候封裝起來。可是，難免會(huì)有遺漏。

能不能一次封裝，到處調(diào)用，還不需要初始化？

能！祭出 Proxy 大神：

// utils/asyncjsfunction wxPromisify(fn) { ... }   
 // 前面已經(jīng)定義過了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({...});

解釋：

因?yàn)?awx 是代理的 wx 對(duì)象，調(diào)用 awx.login() 的時(shí)候，實(shí)際是先調(diào)用代理的 get(wx, "login")，找到用來代替 wx.login 的東西。

根據(jù)上面代碼里的邏輯，先從 cache 里找使用 wxPromisify() 封裝的結(jié)果，若有，直接返回；若沒有，先封裝成 Promise 網(wǎng)絡(luò)的函數(shù)，存入 cache，再返回。

直觀一點(diǎn)描述，大概是這樣：

awx.login();
   ^^^^^^   get(wx, "login")

以上是“Proxy封裝小程序中異步調(diào)用的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：Proxy封裝小程序中異步調(diào)用的示例分析-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://weahome.cn/article/piijd.html