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

2024-10-09 06:56:09

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

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

封装微信小程序http拦截器过程解析

前言微信小程序是数据驱动的应用,开发技术和vue.react和angular等mv*技术类似.在vue下可以用vue-resource.axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request(OBJECT),所以我们需要对wx.request进行封装,实现http拦截器的功能. 第一步:创建一个request.js文件第二步:确定http.upload和websocket前缀第三步:封装wx.request 在请求发出前处理http地址.请求头和参数.
微信小程序之页面拦截器的示例代码

场景小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页. 是否有系统角色信息需要通过异步请求来获取. 需求分析&实现对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Larav
微信小程序wx.request拦截器使用详解

一. 请求后台的时候,服务端对每一个请求都会验证权限,而前端也需要对服务器返回的特殊状态码统一处理,所以可以针对业务封装请求. 首先我们通过request拦截器在每个请求头里面塞入token等信息,好让后端对请求进行权限验证.并创建一个respone拦截器,当服务端返回特殊的状态码,我们统一做处理,如未登录网络错误等操作. 二. 1.首先了解小程序官方api-wx.request() ,通过示例可以看出wx.request的参数是一个对象,拥有传输地址,传输内容,响应头,成功失败回调函数等属性和
小程序如何自主实现拦截器的示例代码

在一些框架中发现会提供一个很实用的功能:拦截器(interceptor).例如要实现这个需求:小程序每次获取到定位后都存到 globalData 里: wx.getLocation({ // .. success(res) { getApp().globalData.location = res // ... } }) 如果每一处使用 wx.getLocation 的地方都这么写也没啥大问题,但总显得不够"智能",一方面是多了重复代码,另一方面如果需求变动,获取到定位后存到别的地方,那
微信小程序商品详情页规格属性选择示例代码

detail.wxml展示页面  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> &
C#获取微信小程序的云数据库中数据的示例代码

目录 0 背景说明 0.1 获取AccessToken 0.2 数据库查询 0.3 文件下载 2. 简单的封装 3. 简单测试 4. 参考文档 0 背景说明试水小程序,实现访客登记,现有.NET程序需要获取该小程序的数据 0.1 获取AccessToken 调用绝大多数后台接口时都需使用 access_token 参考小程序文档:auth.getAccessToken 发送Get请求,获取AccessToken 接口: https://api.weixin.qq.com/cgi-bin/tok
微信小程序实现幸运大转盘功能的示例代码

目录一.项目展示二.抽奖页三.领奖页一.项目展示幸运大转盘是一个简单的抽奖小程序参与用户点击抽奖便可抽取轮盘的奖品二.抽奖页抽奖页是一个大轮盘和活动规则页面形式简单主要核心在于轮盘核心代码[轮盘旋转]如下: getLottery: function () { var that = this var awardIndex = Math.random() * 6 >>> 0; // 获取奖品配置 var awardsConfig = app.awardsConfig,
struts2自定义拦截器的示例代码

题目:使用struts2自定义拦截器,完成用户登陆才能访问权限的实现在session中存放user变量表示用户登陆,若user为空则用户没有登陆,反之登陆显示提示信息(请先登录) 定义拦截器在struts.xml中定义拦截器使用标签<Intercaptors>.<Intercapter>. <interceptors> <interceptor name="test" class="Intercaptor.Intercaptor
SpringMVC拦截器——实现登录验证拦截器的示例代码

本例实现登陆时的验证拦截,采用SpringMVC拦截器来实现当用户点击到网站主页时要进行拦截,用户登录了才能进入网站主页,否则进入登陆页面核心代码首先是index.jsp,显示链接 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String bas
微信小程序实现图片懒加载的示例代码

本文主要介绍微信小程序的模拟图片懒加载,实现的原理是通过页面预加载图片(默认图),加载完成后再显示出来原图,而非真正意义上的懒加载(跟web的懒加载还有很大的差距),只是借此提高用户体验度. 多图片懒加载 1.xml页面 <block wx:for="{{list}}" wx:key=""> <image class='relative width-100 mgb-20 fade_in' src='{{item.cover_url}}' mode=
微信小程序中实现手指缩放图片的示例代码

公司开发微信小程序,pm想实现如下需求: 用手指缩放图片.其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api.wx.previewImage,就是它.预览图片.除了不能预览开发环境的本地电脑的图片外,你手机真机的图片,以及http服务器上的图片都是可以预览的,而且缩放功能做得很流畅.下面就说说如何用js来实现这个功能吧. 先上源码,然后在逐步剖析: Page({ data: { touch: { distance: 0
springmvc限流拦截器的示例代码

限流器算法目前常用限流器算法为两种:令牌桶算法和漏桶算法,主要区别在于:漏桶算法能够强行限制请求速率,平滑突发请求,而令牌桶算法在限定平均速率的情况下,允许一定量的突发请求下面是从网上找到的两张算法图示,就很容易区分这两种算法的特性了漏桶算法令牌桶算法针对接口来说,一般会允许处理一定量突发请求,只要求限制平均速率,所以令牌桶算法更加常见. 令牌桶算法工具RateLimiter 目前本人常用的令牌桶算法实现类当属google guava的RateLimiter,guava不仅实现了令牌桶

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

相关推荐

随机推荐