小程序如何自主实现拦截器的示例代码
在一些框架中发现会提供一个很实用的功能：拦截器（interceptor）。例如要实现这个需求：小程序每次获取到定位后都存到 globalData 里：
wx.getLocation({
// ..
success(res) {
getApp().globalData.location = res
// ...
}
})
如果每一处使用 wx.getLocation 的地方都这么写也没啥大问题，但总显得不够“智能”，一方面是多了重复代码，另一方面如果需求变动，获取到定位后存到别的地方，那要改很多次。
优雅的拦截器
有了拦截器，可以更优雅的实现它：
intercept('getLocation', {
success(res) {
getApp().globalData.location = res
}
})
只要在一处定义如上的拦截器，其他地方直接用 wx.getLocation 即可。那么，如何实现上面的方式呢？
实现 intercept 方法
// utils/intercept.js
// 存储拦截器定义
var interceptors = {}
function intercept(key, config) {
intercept[key] = config
}
export {
intercept,
interceptors
}
很简单，暴露出 intercept 方法，定义一个存储器也一并暴露出去。
代理 wx
要实现使用 wx.getLocation 自动应用拦截器，就必须基于原有方法重新定义它。
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 中，请求回来需要取一遍。数据异常时还要针对错误码做特定处理，就可以很方便的用拦截器处理：
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，尽量以大家最为熟悉的方式书写代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javascript实现鼠标移到Image上方时显示文字效果的方法
这篇文章主要介绍了javascript实现鼠标移到Image上方时显示文字效果的方法,涉及javascript鼠标事件及图文属性动态设置的相关技巧,可用于为图片增加文字提示效果,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了微信小程序实现Timeline时间线效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了浅谈Webpack下多环境配置的思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
侧栏里的有些内容滚动到页面顶端以后就固定在那个位置，不再跟随滚动条而滚动，想必很多站长朋友都想实现这个效果吧，接下来为大家详细介绍下，感兴趣的你可不要错过了哈2013-03-03
这篇文章主要为大家介绍了Cropper.js入门之在HTML中实现交互式图像裁剪示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
JavaScript Event事件学习第一章 Event介绍
Events是每一个JavaScript程序核心。什么是事件处理，它有什么问题和怎样写出跨浏览器的代码，我将在这一章做一个概述。我也会提供一些有精彩的关于事件处理程序的细节的文章。2010-02-02
本文主要介绍了three.js中聚光灯及其属性介绍小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了JavaScript简单判断复选框是否选中及取出值的方法,涉及javascript遍历复选框及元素取值的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了微信小程序vant输入框问题,本文给大家分享完美解决方案，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-09-09
下面小编就为大家带来一篇js获取对象、数组的实际长度,元素实际个数的实现代码。小编觉得挺不错的，现在就分享 给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论