Proxy封装小程序中异步调用的示例分析-创新互联
这篇文章主要介绍Proxy封装小程序中异步调用的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
为洛浦等地区用户提供了全套网页设计制作服务,及洛浦网站建设行业解决方案。主营业务为成都网站制作、成都网站设计、洛浦网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!示例:
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://myzitong.com/article/piijd.html