防抖与节流方案_前端ajax优化解决方案

伴随着前端ajax的应用场景越来越多，那就免不了一个整合的ajax优化解决方案了，自己优化太麻烦？没事，有它帮你解决：hajax

与当下比较热门的请求库 axios 和原生的 fetch相比，hajax有什么一些什么内容和特点呢？

基本操作：基本请求，类promise链式操作方式，请求和响应的拦截器，简便的请求取消等；
轻松优化：接口数据缓存，防抖，节流；
体积小：9kb；
针对端：浏览器（暂不打算支持服务端）。
支持typescript

关于基本操作我在这里就不多说了，大家可以直接看文档，大概为介绍一下hajax 优化方案

防抖 debounce

在hajax中防抖的概念：时间间隔 n 毫秒内若再次请求相同接口，则重新计时，直到停止时间大于等于 n 毫秒才请求接口。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>debounce demo</title><script src="../../release/dist/hx.min.js"></script>
</head>
<body>
<script>function search() {hx.get('http://hajax.test/index.php', {mode: 'debounce'//debounceTime: 300 //default}).then(resp => {console.log('success', resp)}).catch(resp => {console.log('failed', resp)})}
</script><input type="text" oninput="search()">
</body>
</html>

设置 mode 参数为 debounce ，默认 debounceTime 为 300 毫秒：即输入一个关键字后300秒没有其他输入则会触发搜索，若有其他输入则重新开始计时。

2. throttle 节流

在hajax中节流的概念：在请求开始n毫秒内的相同路径下的请求将不会被执行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../release/dist/hx.min.js"></script>
</head>
<body>
<script>function search() {hx.get('http://hajax.test/index.php', {mode: 'throttle'//throttleTime: 3000 //default}).then(resp => {console.log('success', resp)}).catch(resp => {console.log('failed', resp)})}
</script><input type="text" oninput="search()">
</body>
</html>

设置 mode 参数为 throttle 即可，默认 throttleTime 为 3000 毫秒：即输入一个关键字后立即执行搜索操作，若3000毫秒内输入其他字符都不会执行搜索操作

3. 接口缓存（条件：GET请求）

在hajax中接口缓存的概念：第一个请求将返回数据做缓存，后续相同路径下的接口请求将直接访问缓存内的数据。若第一个请求在pending状态下又来了一个相同路径的请求该怎么办？hajax针对这种场景做了特殊处理，后面的那个请求将会等待上一个接口请求完成后接收它的请求数据，所以在hajax里出现了一个特殊的概念叫 bufferTime，他不是代表的缓存时间，而是从请求开始以后的一段时间，这段时间内可能并没有响应数据，当然也就没有响应数据，在这段时间内的后续请求都会放入一个并发缓冲区，等待第一个请求完成。在这里为了避免偶发的网络问题导致的接口失败情况，hajax加入了自动重试的机制，缓冲区有多少个请求就会自动重试多少次，当然你也可以通过配置autoRetry关闭自动重试。

那么怎么配置缓存呢，hajax中提供了创建和配置缓存策略的接口：

// 配置多条hx.setStrategy([hx.createStrategy('*', 5000), // 策略1，通配符，缓存5秒，默认失败自动重试hx.createStrategy(/.php$/, null, false), // 策略2，正则匹配url，一直缓存，失败后不重试并且直接通知所有缓冲区的请求失败hx.createStrategy('/index.php') // 策略3，直接匹配url，默认一直缓存，默认失败自动重试
])// 配置一条策略
hx.setStrategy(hx.createStrategy('*'),
)

这里有两个方法：

hx.setStrategy：参数很简单，策略数组或者单个策略，不多讲。
hx.createStrategy：这个方法有三个参数:
1. urlExp：匹配规则，支持确定的url，正则，'*'
2. bufferTime：上面介绍过这个参数啦
3. autoRetry ：上面也介绍过这个参数啦

这里粗略介绍一下，更加详细文档都在仓库。

我希望通过hajax 整合的优化方案能够帮助更多的人更轻松更快捷并且没有任何副作用的去实现整个项目的请求优化，如果看起来觉得还不错不妨试试哦，希望大家可以给出一些宝贵的意见或者想法。附上仓库地址：

Bennnis/HAjaxgithub.com