js实现axios限制请求队列

目录
  • 背景是：
  • 会造成什么情况呢？

背景是：

在实际开发中，可能会遇到网络问题或者查询量比较大的情况，上一个请求还没有完成，用户就发起了下一个请求。

会造成什么情况呢？

但是同一个请求多次发送到服务器，无疑是对服务器的一种压力，所以需要在已经优化服务器过查询速度后，以及用户网络情况比较差的条件下，在前端进行请求限制。

axios 自带的cancelToken可以帮我们实现这个需求，并且提供给了我们一个现成的api axios.CancelToken ，这是一个返回值是带有请求信息的回调函数，我们可以在需要cancel的时候去执行这个回调函数。具体实现如下：

const service = axios.create({});
const penddingMap = new Map();
const addPendding = (config) => {
 config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
  if(!penddingMap.has(config.url)){
   penddingMap.set(config.url,cancel);
  }
 })
}

const removePendding = (config) => {
 if(penddingMap.has(config.url)){
  let cancel = penddingMap.get(config.url);
    cancel(config.url);
    penddingMap.delete(config.url)
 }
}

本地维护一个Map来存储每个请求信息， addPendding 中每次会去先判断是否有cancelToken，如果有就不用重新创建一个cancelToken。 removePendding 中判断请求信息是否在Map中，如果该请求存在于Map中，则执行cancel函数，并删除Map中的该请求。

拦截器中的具体应用：

service.interceptors.request.use(config => {
 removePending(config) // 如果存在Map中先cancel该请求
  addPendding(config)  // 添加该请求到Map中
  return config
})

service.interceptors.response.use(response => {
 ``` // some code
  return response.data
}，error => {
 // 捕获cancel请求并抛出
  if(error instanceof Cancel){
    error.message = '上一请求尚未结束，稍等~';
    Message.error(error.message);
    return Promise.reject(error.response)
  // 这里抛出需要注意，在请求时调用try-catch进行捕获
  })
)

这里拦截成功后，就可以限制住大流量的多次请求。

这里只是一个例子，也可以通过判断按钮逻辑来控制用户是否发起请求。

到此这篇关于js实现axios限制请求队列的文章就介绍到这了,更多相关js axios限制请求队列内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VueJs 搭建Axios接口请求工具

    VueJs 搭建Axios接口请求工具

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 上一章,我们认识了项目的目录结构,以及对项目的目录结构做了一些调整,已经能把项目重新跑起来了.今天我们来搭建api接口调用工具Axios.Vue本身是

  • node.js通过axios实现网络请求的方法

    1.使用Npm 下载axios npm install --save axios var update_url = axios.create({ baseURL:'debug url' }); update_url.get('/debug url').then(function (response){ //response 就是请求url 返回的内容 } 上述的方法请求文件时候,body的默认格式不是form-data.因此我们需要请求的数据格式为form-data的时候,需要使用下面的库 re

  • 解决java使用axios.js的post请求后台时无法接收到入参的问题

    使用vue有一段时间了,下面是我在Java环境下使用vue+axios的时候遇到的一个坑,在这分享给大家,如有不正确或者疑惑的地方可以给我留言. 1.在使用异步请求后台时,由于官方不在更新vue-resource,推荐使用axios,因此在使用的时候难免会遇到各种问题.目前遇到最大的问题是在使用axios.post的请求向Java后端传入入参时,后端无法接收到参数.在这里主要处理移动端浏览器兼容的问题. 在这里我提供了两种解决办法: 一.URLSearchParams.append()方法 由于

  • 使用axios发送post请求,将JSON数据改为form类型的示例

    通常前端通过POST请求向服务器端提交数据格式有4中,分别是"application/x-www-form-urlencoded"格式." multipart/form-data"格式."application/json"格式和"text/xml"格式.通常最常见的是"application/json"格式,也就是通过JSON字符串形式. 在控制台看到的数据就是这样: 有的时候后台需要Form形式的数据才能

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • js实现axios限制请求队列

    目录 背景是: 会造成什么情况呢? 背景是: 在实际开发中,可能会遇到网络问题或者查询量比较大的情况,上一个请求还没有完成,用户就发起了下一个请求. 会造成什么情况呢? 但是同一个请求多次发送到服务器,无疑是对服务器的一种压力,所以需要在已经优化服务器过查询速度后,以及用户网络情况比较差的条件下,在前端进行请求限制. axios 自带的cancelToken可以帮我们实现这个需求,并且提供给了我们一个现成的api axios.CancelToken ,这是一个返回值是带有请求信息的回调函数,我们

  • JS Promise axios 请求结果后面的.then() 是什么意思

    JS Promise axios 请求结果后面的.then() 是什么意思

    目录 Promise 对象 Promise 对象的状态 回调函数 Promise.then() 绑定回调函数 使用 Promise:链式调用 链式调用的实现 错误处理 常见错误 创建 Promise 对象 Promise 其他静态方法 创建已决议的 Promise 对象 多个 Promise 对象 结语&参考文献 Promise 是JS中一种处理异步操作的机制,在现在的前端代码中使用频率很高.Promise 这个词可能有点眼生,但你肯定见过 axios.get(...).then(res =>

  • 如何基于JS实现Ajax并发请求的控制详解

    如何基于JS实现Ajax并发请求的控制详解

    目录 前言 Ajax的串行与并行 Ajax的并发请求控制的两大解决方案 基于Promise递归实现 基于Class实现 代码展示 总结 前言 最近看到一个面试题,当然了,就是这篇文章的标题,Ajax的并发请求的控制,感觉挺有意思的,在社区看了下,应该是字节的面试题,也挺多大佬对这个进行了总结,都看了下,于是自己也想试着总结下,代码文末会全部贴出,如有不足,请指出! Ajax的串行与并行 串行:一般业务需求是下个接口需要用到上个接口的返回的数据,前端常用的请求库是Axios,本身就是基于Promi

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • 解决vue2中使用axios http请求出现的问题

    使用axios处理post请求时,出现的问题解决 默认情况下: axios.post(url, params).then(res => res.data); 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status code 404 我们需要实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 于是得出

  • vue.js 使用axios实现下载功能的示例

    本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦 只好回答一下axios如何拦截get请求并下载文件的了. Ajax无法下载文件的原因 浏览器的GET(frame.a)和POST(form)请求具有如下特点: response会交由浏览器处理 response内容可以为二进制文件.字符串等 Ajax请求具有如下特点: response会交由Javascript处理 response内容仅可以为字符串 因此,Ajax本身无法触发浏览器的下载功能. Axi

  • vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios  我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mi

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • vue 使用axios 数据请求第三方插件的使用教程详解

    axios 基于http客户端的promise,面向浏览器和nodejs 特色 •浏览器端发起XMLHttpRequests请求 •node端发起http请求 •支持Promise API •监听请求和返回 •转化请求和返回 •取消请求 •自动转化json数据 •客户端支持抵御 安装 使用npm: $ npm i axiso 为了解决post默认使用的是x-www-from-urlencoded 去请求数据,导致请求参数无法传递到后台,所以还需要安装一个插件QS $ npm install qs

随机推荐