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控制listbox中项的移动并排序
Nov 12 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
JS数组方法some、every和find的使用详情
Oct 05 Javascript
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
YB217、YB235、YB400浅听
2021/03/02 无线电
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
Dedecms常用函数解析
2008/02/01 PHP
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
python中as用法实例分析
2015/04/30 Python
python中base64加密解密方法实例分析
2015/05/16 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python调用fortran模块
2016/04/08 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python单例模式实例解析
2018/08/28 Python
python list转置和前后反转的例子
2019/08/26 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
教师自荐信范文
2013/12/09 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
学校交通安全责任书
2014/08/25 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
学雷锋日活动总结
2015/02/06 职场文书
好人好事新闻稿
2015/07/17 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang