Proxy 对小程序异步调用进行封装的实现策略

why 174 2024-07-17

上回写到:

没看上回的同学,在这里:在微信小程序中使用 async/await

Proxy 对小程序异步调用进行封装的实现策略

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")

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信公众号创建的步骤与方法全解
下一篇:微信小程序中绝对路径 require 的使用要点
相关文章

 发表评论

暂时没有评论,来抢沙发吧~