小程序技能进阶回忆录 - 如何自主实现拦截器

窗外，是5月明媚的阳光，澄澈蔚蓝的天空，有炮弹欢快地叫着飞过。50多年过去了，我依然如此清晰地记得。

在一些框架中发现会提供一个很实用的功能：拦截器（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，尽可能以你们最为熟悉的方式书写代码。

传送门

• 小程序技能进阶回忆录 - 也许你并不须要小程序框架
• 小程序技能进阶回忆录 - 在缺乏组件化的日子里
• 小程序技能进阶回忆录 - 如何自主实现数据侦听器和计算器
• 小程序技能进阶回忆录 - 如何自主实现拦截器
• 小程序技能进阶回忆录 - globalData 的那些事儿（待发布）
• 小程序技能进阶回忆录 - 何时执行 onLoad（待发布）
• 小程序技能进阶回忆录 - 加强型的 wx.navigateBack（待发布）

广告时间

美团单车事业部（摩拜单车）诚招前端 / 小程序研发工程师，位置北京，有兴趣能够发简历到 zhangshibing@mobike.com 或者扫二维码先加微信勾搭：）