JavaScript如何实现防止重复的网络请求的示例

前言

在开发中，经常会遇到接口重复请求导致的各种问题。
对于重复的网络请求，会导致页面更新多次，发生页面抖动的现象，影响用户体验。
例如当前页面请求还未响应完成，就切换到其他路由，那么这些请求直到响应返回才会中止。
无论从用户体验或者从业务严谨方面来说，取消无用的请求确实是需要避免的。

实现思路

**  1.在发送请求前先拦截当前请求地址 （url + 方法 + 参数）；
**  2.开启一个请求队列用于保存 当前地址；
**  3.每次请求查看请求队列里面有没有当前url地址；
**  4.如果请求队列里有当前url地址就取消当前请求，
**  5.如果没有就发送请求，当请求数据返回后，请求队列里清除当前url地址。

1.平时我们写接口是这样的：

请求接口文件

主要就是这里执行 http方法的时候做操作；
执行http函数的时候能获取到请求所有配置 config ，返回promise对象。

2.这里演示使用axios，思路是执行请求函数的时候外面包一层

axios.js配置文件

3.防止重复网络配置文件

options.js
（1）发送请求前，查看请求队列里是否有当前请求（url地址来判断）

• 请求队列有当前url地址， 取消请求  返回promise.reject失败
• 没有当前请求，正常发送请求；

（2）请求响应回来后，在请求队列里删除当前url地址； （下一次请求就可以正常发送）
​ options.js

axios.js

到这里已经实现了防止重复的网络请求，但还有一个问题，响应请求发生异常了要清除请求队列中当前url地址。不清理，下一次发送请求直接被取消掉 （这里我就随便写了一个方法，把请求队列全部清空，大家可以按自己场景来写）。

完整http.js文件

完整options.js

以上就是我实现防止网络请求的方式，之前我有使用过axios中canceltoken来进行取消请求；当会有一些问题。

1. 需要配置请求文件，不友好，团队开发配置也比较麻烦。
2. 需要给每个请求都配置canceltoken。  有两个方法使用它 具体可以参考官网文档

到此这篇关于javascript如何实现防止重复的网络请求的示例的文章就介绍到这了,更多相关javascript 防止重复的网络请求内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！