建设部网站 专业评估,破天网站定制,哈尔滨市建筑信息网,网站有备案 为企业伴随着前端ajax的应用场景越来越多#xff0c;那就免不了一个整合的ajax优化解决方案了#xff0c;自己优化太麻烦#xff1f;没事#xff0c;有它帮你解决#xff1a;hajax 与当下比较热门的请求库 axios 和原生的 fetch相比#xff0c;hajax有什么一些什么内容和特点呢…伴随着前端ajax的应用场景越来越多那就免不了一个整合的ajax优化解决方案了自己优化太麻烦没事有它帮你解决hajax 与当下比较热门的请求库 axios 和原生的 fetch相比hajax有什么一些什么内容和特点呢基本操作基本请求类promise链式操作方式请求和响应的拦截器简便的请求取消等轻松优化接口数据缓存防抖节流体积小9kb针对端浏览器暂不打算支持服务端。支持typescript关于基本操作我在这里就不多说了大家可以直接看文档大概为介绍一下hajax 优化方案防抖 debounce在hajax中防抖的概念时间间隔 n 毫秒内若再次请求相同接口则重新计时直到停止时间大于等于 n 毫秒才请求接口。!DOCTYPE html
html langen
headmeta charsetUTF-8titledebounce demo/titlescript src../../release/dist/hx.min.js/script
/head
body
scriptfunction 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)})}
/scriptinput typetext oninputsearch()
/body
/html设置 mode 参数为 debounce 默认 debounceTime 为 300 毫秒即输入一个关键字后300秒没有其他输入则会触发搜索若有其他输入则重新开始计时。2. throttle 节流在hajax中节流的概念在请求开始n毫秒内的相同路径下的请求将不会被执行。!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../../release/dist/hx.min.js/script
/head
body
scriptfunction 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)})}
/scriptinput typetext oninputsearch()
/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这个方法有三个参数:urlExp匹配规则支持确定的url正则* bufferTime上面介绍过这个参数啦autoRetry 上面也介绍过这个参数啦这里粗略介绍一下更加详细文档都在仓库。我希望通过hajax 整合的优化方案能够帮助更多的人更轻松更快捷并且没有任何副作用的去实现整个项目的请求优化如果看起来觉得还不错不妨试试哦希望大家可以给出一些宝贵的意见或者想法。附上仓库地址Bennnis/HAjaxgithub.com
