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


Posted in Javascript onJanuary 28, 2021

前言

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

实现思路

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

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

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

请求接口文件

import { http } from '@/plugin/axios'; // 导入请求接口 http

// 初始化
export function getInit(params) {
  return http({
    method: 'get',
    url: '/xxx/xxx/xx',
    params,
  });
}

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

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

axios.js配置文件

import axios from 'axios';
import { httpRequest, completeRequest } from './options'; // 这里就是我们要实现的逻辑文件

// 里面做一些请求拦截,响应拦截操作 具体查看axios文档
const service = axios.create({
  baseURL: 'xxx/xxx',
});

// 请求拦截器
service.interceptors.request.use(config => {}, error => {})

// 响应拦截器
service.interceptors.response.use(response => {
 completeRequest(response); // 2.响应请求回来执行
}, error => {
 
})

export function http(config) { // => 这里config就是传递的请求配置参数
  return httpRequest(config, service); // + 1.在这里做一些逻辑操作
}

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

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

  • 请求队列有当前url地址, 取消请求  返回promise.reject失败
  • 没有当前请求,正常发送请求;
/**
 * 职责: 防止重复的网络请求
 *
 */

let list = new Set(); // 1.请求队列

// 合并 方法 参数 url地址
function getUrl(config = {}) {
 // get请求 params参数 post请求 data参数, baseURL
 const { url, method, params, data, baseURL = '' } = config;
 const urlVal = url.replace(baseURL, '');
 return `${urlVal}?${method === 'get' ? getformatObjVal(params) : getformatObjVal(data)}`;
}

// 处理 url地址 
const getformatObjVal = (obj) => {
 obj = typeof obj === 'string' ? JSON.parse(`${obj}`) : obj;
 var str = [];
 for (let p in obj) {
  if (obj.hasOwnProperty(p) && p !== '_t') {
   var item = obj[p] === null ? '' : obj[p]; // 处理null
   str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  }
 }
 return str.join('&');
}

// 2.请求方法
export function httpRequest(config = {}, axios) {
 const url = getUrl(config); //3. 这里我们获取到了URL地址

 if (list.has(url)) { // 4.查看请求队列是否有当前url地址
  return Promise.reject('In the request'); // 5.在请求队列里面 取消当前请求, 返回Promise失败结果
 }
 
 // 6. 请求队列没有当前url地址 发送请求并把url地址存入请求队列里
 list.add(url);
 return Promise.resolve(axios); 
}

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

// 请求响应回来执行这个函数
export function completeRequest(response = {}) {
 const { config } = response; // 1.response里面config能拿到配置参数
 const url = getUrl(config); // 2.获取url地址 
 if (list.has(url)) {
  list.delete(url); // 3.删除请求队列中的当前请求url地址
 }
}

axios.js

import axios from 'axios';
import { httpRequest, completeRequest } from './options'; // 防止重复请求

const service = axios.create({
  baseURL: 'xxx/xxx',
});

// 请求拦截器
service.interceptors.request.use(config => {}, error => {})

// 响应拦截器
service.interceptors.response.use(response => {
 completeRequest(response); // 2.响应请求回来执行 +
}, error => {
 
})


// 导出请求
export function http(config) {
  return httpRequest(config, service); // 1.发送请求前执行
}

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

/**
 * 清空所有请求队列
 */
export function clearRequestList() {
 list = new Set(); // 这里我就直接清空了
}

完整http.js文件

import axios from 'axios';
import { httpRequest, completeRequest, clearRequestList } from './options'; // 防止重复请求 +

const service = axios.create({
  baseURL: 'xxx/xxx',
});

// 请求拦截器
service.interceptors.request.use(config => {}, error => {})

// 响应拦截器
service.interceptors.response.use(response => {
 completeRequest(response); // 2.响应请求回来执行
}, error => {
 clearRequestList(); // + 
})


// 导出请求
export function http(config) {
  return httpRequest(config, service); // 1.发送请求前执行
}

完整options.js

/**
 * 职责: 防止重复的网络请求
 *
 */

let list = new Set(); // 1.请求队列

// 合并 方法 参数 url地址
function getUrl(config = {}) {
 // get请求 params参数 post请求 data参数, baseURL
 const { url, method, params, baseURL = '' } = config;
 const urlVal = url.replace(baseURL, '');
 return `${urlVal}?${method === 'get' ? getformatObjVal(params) : 'post'}`;
}

// 处理 url地址 
const getformatObjVal = (obj) => {
 obj = typeof obj === 'string' ? JSON.parse(`${obj}`) : obj;
 var str = [];
 for (let p in obj) {
  if (obj.hasOwnProperty(p) && p !== '_t') {
   var item = obj[p] === null ? '' : obj[p]; // 处理null
   str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  }
 }
 return str.join('&');
}

// 2.请求方法
export function httpRequest(config = {}, axios) {
 const url = getUrl(config); //3. 这里我们获取到了URL地址

 if (list.has(url)) { // 4.查看请求队列是否有当前url地址
  return Promise.reject('In the request'); // 5.在请求队列里面 取消当前请求, 返回Promise失败结果
 }

 // 6. 请求队列没有当前url地址 发送请求并把url地址存入请求队列里
 list.add(url);
 return Promise.resolve(axios);
}


/**
 * 请求响应回来执行这个函数
 */
export function completeRequest(response = {}) {
 const { config } = response; // 1.response里面config能拿到配置参数
 const url = getUrl(config); // 2.获取url地址 
 list.has(url) && list.delete(url); // 3.删除请求队列中的当前请求url地址
}

/**
 * 清空所有请求队列
 */
export function clearRequestList(error) {
 // error 可以获取到配置, 做一些操作。
 list = new Set(); // 这里我就直接清空了
}

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

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

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

Javascript 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
JavaScript实现跟随鼠标移动的盒子
Jan 28 #Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 #Javascript
vscode自定义vue模板的实现
Jan 27 #Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
js实现鼠标切换图片(无定时器)
Jan 27 #Javascript
JavaScript实现切换多张图片
Jan 27 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python PyTorch预训练示例
2018/02/11 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Opencv求取连通区域重心实例
2020/06/04 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
主要负责人任命书
2014/06/06 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Nginx配置使用详解
2022/07/07 Servers