E企盈小程序营销工具技术服务商 热线:4006-838-530

小程序如何自主实现拦截器

E企盈小程序直播系统

在一些框架中发现会提供一个很实用的功能:拦截器(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,尽量以大家最为熟悉的方式书写代码。作者:摩拜单车前端团队链接:https://juejin.im/post/5da80732f265da5b7f1ca788

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序如何自主实现拦截器
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏