上回写到：
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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;
}, {});
}
登录后复制复制代码1
2
// pages/somepage/somepage.jsimport { toAsync } = require("../../utils/async");
// ...const awx = toAsync(["login", "request"]);await awx.login();await awx.request({...});
登录后复制这不已经封装过了吗？
这回写的是不一样的封装。因为，一个小程序里要写好多个 toAsync 调用，真的很烦呐！
能不能一次封装，到处调用？能！把所有用到的方法都在初始化的时候封装起来。可是，难免会有遗漏。
能不能一次封装，到处调用，还不需要初始化？
能！祭出 Proxy 大神：
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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);
}
});
}
登录后复制复制代码1
2
3
4
5
6
// app.jsimport { asyncProxy } from "./utils/async";
App({ onLaunch: function() {
wx.awx = asyncProxy(wx); // ....
}
})
登录后复制复制代码1
// 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，再返回。
直观一点描述，大概是这样：
复制代码1
2
awx.login();
^^^^^^ get(wx, "login")
登录后复制推荐教程：《微信公众号》
以上就是Proxy封装小程序的异步调用的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是活力金针菇最近收集整理的关于Proxy封装小程序的异步调用的全部内容，更多相关Proxy封装小程序内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复