成都网站建设设计

将想法与焦点和您一起共享

Proxy封装小程序中异步调用的示例分析

这篇文章主要介绍Proxy封装小程序中异步调用的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

乌拉特中网站建设公司成都创新互联公司,乌拉特中网站设计制作,有大型网站制作公司丰富经验。已为乌拉特中1000多家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的乌拉特中做网站的公司定做!

示例:

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封装小程序中异步调用的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网页标题:Proxy封装小程序中异步调用的示例分析
链接地址:http://chengdu.cdxwcx.cn/article/jgiegh.html