xhrfilter.js

• 去重，全局节流重复的xhr请求，默认500ms内只发送一次重复的请求
• 原生js编写，不依赖任何其它库
• 大小只有1kb
• 使用方便，全局引入后，无需做其它任何处理

什么情况下会产生重复xhr请求？

重复xhr请求定义：相同的请求地址，相同的请求参数

1.后端响应慢的情况下，前端发出xhr请求，后端没有成功返回响应数据期间，前端又发出了一次重复xhr请求。

2.不考虑后端响应慢的情况，一定时间内前端多次重复发出xhr请求，比如重复点击提交按钮。

处理方式？

1.前端全局拦截xhr请求，如果请求未完成，此时如果又有相同xhr请求，则取消掉这次请求。如何判定是否为相同请求，简单的判断依据是：相同的url以及相同的请求数据即为相同请求。

2.前端请求事件去抖，比如一个form表单提交可以通过限制一定时间内只发一次请求来控制请求次数，比如可以使用lodash的_.debounce()方法。

3.还有一种比较繁琐的方式，比如一个form表单提交，可以在每次点击提交按钮之后置灰（disabled），服务端响应成功之后再还原按钮为可点击状态。这种方式需要在每个需要控制请求的地方都添加，我最开始的处理方式也是这种，然后项目中一旦涉及到有很多表单提交之类或者数据post请求之类的，就会特别繁琐，这也是xhrfilter.js诞生的背景。

安装

1. CDN引入

<script src="https://unpkg.com/[email protected]/dist/xhrfilter.min.js"></script>

2. NPM引入

require('xhrfilter')

3. 手动引入（右键另存下载xhrfilter.min.js 到本地）

<script src='xhrfilter.min.js'></script>

使用

本项目内置重复请求过滤，规则是：A请求发出，A请求结果还未返回，紧接着相同的B请求（判断相同请求的条件是相同的url和相同的请求参数）发出，则取消（absort）B请求

在加载项目本身文件之前加载该js文件，内部无需任何处理

扩展

本项目支持扩展拦截请求的规则，可以通过暴露的use(plugin)方法，传入自定义的拦截处理逻辑

案例一：

<!-- npm引入包的方式 -->

import {use} from 'xhrfilter'

xhrfilter.use(xhrDebounce);

// 请求去抖，500内发出的相同请求只发出一次
function xhrDebounce(context, arg, xhr, conditions) {
  var timeNow = Date.now();
  var url = conditions.url;
  var bool = false;
  if (!conditions.xhrTime[url]) {
    conditions.xhrTime[url] = Date.now();
  } else {
    if (timeNow - conditions.xhrTime[url] <= 500) {
      bool = true
    } else {
      conditions.xhrTime[url] = Date.now();
    }
  }
  return bool
}

案例二：

<!-- CDN引入的方式 -->

xhrfilter.use(xhrThrottle)

var pendingUrl = {};

// 不管是get请求还是post请求，只要url相同就去重
function xhrThrottle(context, arg, xhr, conditions) {
  var url = conditions.url;
  if (pendingUrl[url]) {
    setTimeout(function () {
      xhr.abort()
    }, 0)
  } else {
    pendingUrl[url] = xhr
  }
}

以上案例都可在项目examples文件夹下找到

API

• xhrfilter.use(plugin)
  • 参数：
    • context 当前xhrfilter实例
    • arg 当前请求的参数
    • xhr 当前请求的 XMLHttpRequest 对象
    • conditions 内部的一些参数，包含当前请求的 url 参数
  • 用法： 安装自定义过滤逻辑插件
  • 参考： examples案例

参考

ajaxHook - 拦截xhr请求，添加自定义处理逻辑