Skip to content

✂️ 一个轻量的,能够阻止前端请求重复提交的库

Notifications You must be signed in to change notification settings

simplefeel/xhrfilter

Repository files navigation

xhrfilter.js Build Status

  • 去重,全局节流重复的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>
  1. NPM引入
require('xhrfilter')
  1. 手动引入(右键另存下载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请求,添加自定义处理逻辑

About

✂️ 一个轻量的,能够阻止前端请求重复提交的库

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published