小程序如何自主实现拦截器的示例代码
在一些框架中发现会提供一个很实用的功能：拦截器（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
//存储拦截器定义
varinterceptors={}
functionintercept(key,config){
intercept[key]=config
}
export{
intercept,
interceptors
}
很简单，暴露出intercept方法，定义一个存储器也一并暴露出去。
代理wx
要实现使用wx.getLocation自动应用拦截器，就必须基于原有方法重新定义它。
import{interceptors}from'./intercept'
//备份原有微信方法
varwxBackup={}
[
'getLocation'
//还可以有很多其他方法...
].forEach((key)=>{
wxBackup[key]=wx[key]
wx[key]=(config)=>{
if(interceptors[key]){
//备份业务代码传入的回调方法
varbackup={}
varinterceptor=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){
varlocation=getApp().globalData.location
data.location=location.latitude+','+location.longitude
returndata
},
success(res){
if(res.code==200){
returnres.object
}else{
if(res.code=='xxx'){
//登录失效，重新登录
//....
}
}
}
})
注意，拦截器函数里多了返回值，具体实现方法就不多写，基于上述实现完善代码即可。
总结
细心的读者可能发现，我们代理或者改造了很多微信提供的方法，有些开发者可能不喜欢这样，希望保持原有代码的纯洁性。这要看团队喜好吧，基于此考虑，主要是不想定义太多新的方法或api，尽量以大家最为熟悉的方式书写代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。