重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

Proxy封装小程序的异步调用

时间:2020-09-04 13:00:07 作者:重庆seo小潘 来源:
上回写到: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 || []).m

上回写到: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封装小程序的异步调用的详细内容,更多请关注小潘博客其它相关文章!