小程序如何自主实现拦截器的示例代码

网友投稿 368 2023-11-11

在一些框架中发现会提供一个很实用的功能：-（interceptor）。例如要实现这个需求：小程序每次获取到定位后都存到 globalData 里：

?
1
2
3
4
5
6
7
wx.getLocation({
// ..
success(res) {
getApp().globalData.location = res
// ...
}
})

小程序如何自主实现-的示例代码

如果每一处使用 wx.getLocation 的地方都这么写也没啥大问题，但总显得不够“智能”，一方面是多了重复代码，另一方面如果需求变动，获取到定位后存到别的地方，那要改很多次。

优雅的-

有了-，可以更优雅的实现它：

?
1
2
3
4
5
intercept(getLocation, {
success(res) {
getApp().globalData.location = res
}
})

只要在一处定义如上的-，其他地方直接用 wx.getLocation 即可。那么，如何实现上面的方式呢？

实现 intercept 方法

很简单，暴露出 intercept 方法，定义一个存储器也一并暴露出去。

代理 wx

要实现使用 wx.getLocation 自动应用-，就必须基于原有方法重新定义它。

?
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
27
28
29
import { interceptors } from ./intercept
// 备份原有微信方法
var wxBackup = {}
[
getLocation
// 还可以有很多其他方法 ...
].forEach((key) => {
wxBackup[key] = wx[key]
wx[key] = (config) => {
if (interceptors[key]) {
// 备份业务代码传入的回调方法
var backup = {}
var interceptor = interceptors[key]
[
success,
fail,
complete
].forEach((k) => {
backup[k] = config[k]
config[k] = (res) => {
interceptor[k](res)
backup[k](res)
}
})
}
wxBackup[key](config)
}
})

当然，上述代码用数组列出了所有可能被定义-的微信函数，也可以使用 Object.keys(wx) 通用处理。

更多使用场景

上面的场景比较简单，-的应用还有更多场景。比如每次请求传参带上公参经纬度，接口返回的数据都会约定包裹在 object 中，请求回来需要取一遍。数据异常时还要针对错误码做特定处理，就可以很方便的用-处理：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
intercept(request, {
data(data) {
var location = getApp().globalData.location
data.location = location.latitude + , + location.longitude
return data
},
success(res) {
if (res.code == 200) {
return res.object
} else {
if (res.code == xxx) {
// 登录失效，重新登录
// ....
}
}
}
})

注意，-函数里多了返回值，具体实现方法就不多写，基于上述实现完善代码即可。

总结

细心的读者可能发现，我们代理或者改造了很多微信提供的方法，有些开发者可能不喜欢这样，希望保持原有代码的纯洁性。这要看团队喜好吧，基于此考虑，主要是不想定义太多新的方法或 api，尽量以大家最为熟悉的方式书写代码。

您可能感兴趣的文章:封装微信小程序http-过程解析微信小程序wx.request-使用详解微信小程序之页面-的示例代码

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

标签：示例 程序 代码 小程序 数据
上一篇:JS实现监控微信小程序的原理
下一篇:微信小程序实现商城倒计时
相关文章

 发表评论

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