防抖与节流方案_前端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

防抖与节流方案_前端ajax优化解决方案相关推荐

防抖与节流方案_函数防抖和节流
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize.scroll.mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数. 通常这种情况下我 ...
防抖与节流方案_如何理解js的防抖与节流
很高兴回答你这个问题,希望可以给你讲述清楚! 我们先举个例子: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而 ...
防抖与节流方案_关于图片懒加载的几种方案
作者: 山月行转发链接:https://mp.weixin.qq.com/s/rY1LbW95LR6AqF1Vcx_d1Q 懒加载,顾名思义,在当前网页,滑动页面到能看到图片的时候再加载图片故问题 ...
dll文件懒加载_前端性能优化
# 前端性能优化写在最前面:下面都是我对webpack的一些性能优化,想系统的学习性能优化方面的知识推荐大家看看这本书很系统感觉面试也能如鱼得水 ## 构建优化 ### webpack优化 ( ...
什么是防抖、节流？小程序项目优化——防抖、节流
1.什么是防抖.节流?(个人理解) 防抖:延迟函数执行.设置定时器,通过定时器来执行函数,可以重置定时器防止函数高频率的执行导致加载缓慢.加重服务器负担. 节流:间隔执行函数.如果某段代码在一段时间内 ...
前端白屏问题_前端性能优化之白屏时间
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念.重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践. 一.概念白屏时间:即用户点击一个链接或打开浏览 ...
软件技术方案_智慧工地整体解决方案核心系统有哪些？
智慧工地是一种崭新的工程现场一体化管理模式,是互联网+与传统建筑行业的深度融合.它充分利用移动互联.物联网.云计算.大数据等新一代信息技术,围绕质量.安全.人员.费用等各方面因素,改变传统建筑施工现场 ...
事件触发控制_前端性能优化：事件的节流throttle与防抖debounce
scroll 事件是一个非常容易被反复触发的事件,另外,resize 事件.鼠标事件(比如 mousemove.mouseover 等).键盘事件(keyup.keydown 等)都存在被频繁触发的风 ...
java接口防抖_前端性能优化：高频执行事件/方法的防抖
日期:2013-6-25 来源:GBin1.com 高频执行事件/方法的防抖通常,开发人员会在有用户交互参与的地方添加事件,而往往这种事件会被频繁触发.想象一下窗口的resize事件或者是一个元素 ...

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

防抖与节流方案_前端ajax优化解决方案相关推荐

最新文章

热门文章