浅谈Axios去除重复请求方案

目录
  • 一、取消重复请求
  • 二、清理所有请求

此方案主要有两个功能

1.请求发出后，后续重复请求取消不处理，等待第一次请求完成。
2.路由跳转后，上一个页面未完成请求全部清理。

一、取消重复请求

前置知识：

1.axios官方提供的取消方法，可以查阅相关文档：CancelToken
2.js Map相关概念
3.安全的查询字符串解析和字符串分解库 qs,功能类似js自带的JSON

为简化参数处理，本方案只考虑post请求，也就是如果method，url以及data相同则视为重复请求

// axios.js
const pending = new Map()
/**
 * 添加请求
 * @param {Object} config
 **/
const addPending = (config) => {
  const url = [
    config.method,
    config.url,
    qs.stringify(config.data)
  ].join('&')
  if (pending.has(url)) { // 如果 pending 中存在当前请求则取消后面的请求
    config.cancelToken = new axios.CancelToken(cancel => cancel(`重复的请求被主动拦截: ${url}`))
  } else { // 如果 pending 中不存在当前请求，则添加进去
    config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
      pending.set(url, cancel)
    })
  }
}
/**
 * 移除请求
 * @param {Object} config
 */
const removePending = (config) => {
  const url = [
    config.method,
    config.url.replace(config.baseURL, ''), // 响应url会添加域名，需要去掉与请求URL保持一致
    qs.stringify(JSON.parse(config.data)) // 需要与request的参数结构保持一致，request中是对象，response中是字符串
  ].join('&')
  if (pending.has(url)) { // 如果在 pending 中存在当前请求标识，取消当前请求，并且移除
    pending.delete(url)
  }
}

/* axios全局请求参数设置，请求拦截器 */
axios.interceptors.request.use(
  config => {
    addPending(config) // 将当前请求添加到 pending 中
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截器即异常处理
axios.interceptors.response.use(
  response => {
    removePending(response.config) // 在请求结束后，移除本次请求
    return response
  },
  err => {
    if (err && err.config) {
      removePending(err.config) // 在请求结束后，移除本次请求
    }
    return Promise.resolve(err.response)
  }
)

二、清理所有请求

// axios.js
/**
 * 清空 pending 中的请求（在路由跳转时调用）
 */
export const clearPending = () => {
  for (const [url, cancel] of pending) {
    cancel(url)
  }
  pending.clear()
}

// router.js
router.beforeEach((to, from, next) => {
  // 路由跳转，清除所有请求
  clearPending()
  })

到此这篇关于Axios去除重复请求方案的文章就介绍到这了,更多相关Axios去除重复请求方案内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Axios取消重复请求的方法实例详解

    Axios取消重复请求的方法实例详解

    目录 前言 一.如何取消请求 二.如何判断重复请求 三.如何取消重复请求 3.1 定义辅助函数 3.2 设置请求拦截器 3.3 设置响应拦截器 四.CancelToken 的工作原理 五.总结 六.参考资源 前言 在 Web 项目开发过程中,我们经常会遇到重复请求的场景,如果系统不对重复的请求进行处理,则可能会导致系统出现各种问题.比如重复的 post 请求可能会导致服务端产生两笔记录.那么重复请求是如何产生的呢?这里我们举 2 个常见的场景: 假设页面中有一个按钮,用户点击按钮后会发起一个 A

  • 项目中如何使用axios过滤多次重复请求详解

    项目中如何使用axios过滤多次重复请求详解

    目录 一.前言: 这个情况下,我们通常的做法有两种: 二.CancelToken类 最终效果 总结 一.前言: 我们在web应用开发过程当中,经常会遇到一个时刻发起了多个请求的场景 这个情况下,我们通常的做法有两种: 可以在请求时show一个loading,阻止用户操作. 或者人为加个变量,做一个请求的节流 我们的项目中,目前大部分情况也是采用以上两种方式做的.今天来介绍一个新的方式. 二.CancelToken类 我们之前实例化一个Promise,这个对象是否成功与否,是无法在函数外部决定的,

  • axios如何取消重复无用的请求详解

    axios如何取消重复无用的请求详解

    前言 在开发中,经常会遇到接口重复请求导致的各种问题. 对于重复的get请求,会导致页面更新多次,发生页面抖动的现象,影响用户体验. 对于重复的post请求,会导致在服务端生成两次记录(例如生成两条订单记录). 如果当前页面请求还未响应完成,就切换到了下一个路由,那么这些请求直到响应返回才会中止. 无论从用户体验或者从业务严谨方面来说,取消无用的请求确实是需要避免的. 当然我们可以通过页面loading来避免用户进行下一次的操作,但本文只讨论单纯的如何取消这些无用的请求. axios 的 can

  • axios取消请求与避免重复请求

    目录 起源 现状 取消请求 cancelToken 修改后的请求方法 避免重复请求 总结 起源 某个页面需要下载全部数据的功能,下载数据量大,接口延迟长..... 某个页面加载初始数据量延长长,但单个检索快速,出现初始数据加载中时,检索接口返回,初始数据后续返回覆盖了检索数据的展示.... 这些情况需要我们: 能够手动取消/终止请求Request. 某些页面接口同时只能有一个在请求. 现状 系统基于老哥花裤衩开源的vue-element-admin做的二次开发,其中的请求采用的是axios,其中

  • vue axios重复点击取消上一次请求封装的方法

    使用场景 重复点击或者多tab标签使用一个视图等(当然也可以用加载中或者透明背景禁止请求中再次点击) 封装代码 来自于互联网 let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pending[p].u === config.url + '&' + conf

  • 浅谈Axios去除重复请求方案

    目录 一.取消重复请求 二.清理所有请求 此方案主要有两个功能 1.请求发出后,后续重复请求取消不处理,等待第一次请求完成. 2.路由跳转后,上一个页面未完成请求全部清理. 一.取消重复请求 前置知识: 1.axios官方提供的取消方法,可以查阅相关文档:CancelToken 2.js Map相关概念 3.安全的查询字符串解析和字符串分解库 qs,功能类似js自带的JSON 为简化参数处理,本方案只考虑post请求,也就是如果method,url以及data相同则视为重复请求 // axios

  • 浅谈axios中取消请求及阻止重复请求的方法

    目录 前言 核心--CancelToken 实际应用和封装 一些小细节 前言 在实际项目中,我们可能需要对请求进行"防抖"处理.这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮,导致前端向后端重复发送多次请求.这里我列举两种比较常见的实际情况: PC端 - 用户双击搜索按钮,可能会触发两次搜索请求 移动端 - 因移动端没有点击延迟,所以极易造成误操作或多操作,造成请求重发 以上情况有可能在有Loading遮罩时依然发生,所以我们要考虑前端阻止重复请求的方法. 核心--Canc

  • 浅谈MySQL大表优化方案

    背景 阿里云RDS FOR MySQL(MySQL5.7版本)数据库业务表每月新增数据量超过千万,随着数据量持续增加,我们业务出现大表慢查询,在业务高峰期主业务表的慢查询需要几十秒严重影响业务 方案概述 一.数据库设计及索引优化 MySQL数据库本身高度灵活,造成性能不足,严重依赖开发人员的表设计能力以及索引优化能力,在这里给几点优化建议 时间类型转化为时间戳格式,用int类型储存,建索引增加查询效率 建议字段定义not null,null值很难查询优化且占用额外的索引空间 使用TINYINT类

  • 浅谈vue中get请求解决传输数据是数组格式的问题

    qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的复数格式,因此indices是索引的意思 //bracket是括号的意思,因此arrayFormat:'brackets'代表数组下标为空[] qs.stringify({ arr: [1,2,3] }, { indices: false }) //arr=1&arr=2&arr=3 qs.s

  • 浅谈Spring Cloud Netflix-Ribbon灰度方案之Zuul网关灰度

    Eureka默认集成了Ribbon,所以Ribbon的灰度实现原理就是借助服务注册到Eureka中的eureka.instance.metadata-map的内容来进行匹配的. Zuul网关的灰度实现也是借助了一个Ribbon的插件来实现,相对比较简单. 项目环境说明:有两个eureka的服务端(eureka-server),有两个相同的后端服务(service-sms),有一个网关服务(cloud-zuul). 1.网关的依赖: <?xml version="1.0" enco

  • 浅谈MySQL之select优化方案

    目录 生活中的例子 慢查询 如何去优化 count limit 最大值最小值min&max 生活中的例子 我们是否看到过在公司中许多查询语句都是select * xxxx 心中的想法肯定是,别人写了select *,那我写吧,省去了不少麻烦事儿 慢查询 首先去思考,最基本的,是否我们使用的数据库插查询语句存在了访问的数据太多 其实大部分性能低的查询往往都可以通过减少访问的数据量来优化的 因为select * 会给服务器带来额外的I/O.内存和cpu的消耗 数据库中慢查询开销的三个指标 相应时间

  • 浅谈angular2的http请求返回结果的subcribe注意事项

    实例如下: this.monitorSer.getVehicleLonAndLat(vehicleIds) .subscribe( data => { //将data下的data字符串转化为vehdata数组 this.vehData=JSON.parse(data.data); //功能实现 this.loadOverLay(); }, error => this.errorMessage = <any>error );//错误处理 subscribe()异步处理,如果需要用返回

  • 浅谈Strut2如何对请求参数的封装

    众所周知,Strut2的Action类通过属性可以获得所有相关的值,如请求参数.Action配置参数.向其他Action传递属性值(通过chain结果)等等.要获得这些参数值,我们要做的唯一一件事就是在Action类中声明与参数同名的属性,在Struts2调用Action类的Action方法(默认是execute方法)之前,就会为相应的Action属性赋值. 要完成这个功能,有很大程度上,Struts2要依赖于ValueStack对象.这个对象贯穿整个Action的生命周期(每个Action类的

  • 浅谈python3发送post请求参数为空的情况

    post请求的时候如果不带参数,其实作用就跟get请求一样.我们在做接口测试的时候,发现开发就全部使用的post,get的作用就被这样的post空参数请求给替代了. 在Python代码请求,如下: class HttpHelper(): def __init__(self): '''获取driver对象,和接口ip地址信息,里面的方法大家可以忽略,根据自己的情况来设置 ''' self.dr=Common.driver run_info=Common().get_current_run_conf

随机推荐