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

站长资源 2024/11/26 佚名

2 0 1

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

小程序拦截器,小程序拦截

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

JS立即执行的匿名函数用法分析

uni-app微信小程序登录并使用vuex存储登录状态的思路详解

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接