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

使用场景

重复点击或者多tab标签使用一个视图等（当然也可以用加载中或者透明背景禁止请求中再次点击）

封装代码

来自于互联网

let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
 for(let p in pending){
  if(pending[p].u === config.url + '&' + config.method) { //当当前请求在数组中存在时执行函数体
   pending[p].f(); //执行取消操作
   pending.splice(p, 1);
  }
 }
}

// http请求拦截器
axios.interceptors.request.use(config => {

 removePending(config); //在一个axios发送前执行一下取消操作
 config.cancelToken = new cancelToken((c)=>{
  // 这里的axios标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式
  pending.push({ u: config.url + '&' + config.method, f: c });
 });

 return Promise.resolve(config)
}, error => {
 return Promise.reject(error)
})

// http响应拦截器
axios.interceptors.response.use(data => { 

 removePending(data.config); //在一个axios响应后再执行一下取消操作，把已经完成的请求从pending中移除

 return Promise.resolve(data)

}, error => {
 //加载失败
 return {'data':{}}
 // return Promise.reject(error)
})

经过多次测试发现不同请求也给我取消了，原因是没有校验请求参数，也就是说get请求可以用，修改以下代码

pending.push({ u: config.url + '&' + config.method, f: c });

修改为：

pending.push({ u: config.url + JSON.stringify(config.data) +'&' + config.method, f: c });//config.data为请求参数

上面判断也需要修改，这样get请求和post都可以用了

解决分析

（个人理解）

官方提供了axios.CancelToken来取消上一次请求方法，因此只需要判断上一次请求是否重复。声明数组变量 pending用于存储每个请求实例的axios标识（请求方式，请求参数，请求url）和该实例的取消函数；在请求拦截器中创建取消函数实例，将请求的标识（判断重复标识）及 该请求实例取消函数 push到pending数组中，创建取消上一次请求方法 removePending，该方法主要判断axios请求标识是否重复，重复则执行该实例的取消函数，并且从 pending中移除标识及该实例取消函数。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue axios 二次封装的示例代码

    这段时间告诉项目需要,用到了vue. 刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了 顺便封装了一下 //引入axios import axios from 'axios' let cancel ,promiseArr = {} const CancelToken = axios.CancelToken; //请求拦截器 axios.interceptors.request.use(config => { //发起请求时,取消掉当前正在进行的相同请求 if

  • 详解vue axios二次封装

    这段时间告诉项目需要,用到了vue. 刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了 顺便封装了一下 定义公共参数与引入组件: import axios from 'axios' import qs from 'qs' axios.interceptors.request.use(config => { //显示loading return config }, error => { return Promise.reject(error) }) axios

  • Vue二次封装axios为插件使用详解

    照例先贴上 axios的 gitHub 地址 不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说: 基本的封装要求: 统一 url 配置 统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重

  • vue axios基于常见业务场景的二次封装的实现

    axios axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 在前端框架中的应用也是特别广泛,不管是vue还是react,都有很多项目用axios作为网络请求库. 我在最近的几个项目中都有使用axios,并基于axios根据常见的业务场景封装了一个通用的request服务. npm: $ npm install axios bower: $ bower install axios Using cdn: <script src="https:/

  • 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

  • vue axios请求频繁时取消上一次请求的方法

    一.前言 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响.例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求并没有必要真的发送出去,这时候就需要在发送新请求的时候直接取消上一次请求. 二.代码 <script> import axios from 'axios' import qs from 'qs' export default { methods: { request(keyword) { var

  • 详解Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d

  • Vue路由重复点击报错问题及解决

    目录 vue路由重复点击时会出现报错 局部处理 全局处理 vue 重复点击菜单,路由重复报错解决 报错原因 解决方法 总结 vue路由重复点击时会出现报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:XXX 虽然不影响运行结果,但最好还是处理一下. 局部处理 局部处理是指对单个路由进行处理,其他的路由依旧报错. 在路由跳转的push语句中添加catch捕捉

  • Vue axios与Go Frame后端框架的Options请求跨域问题详解

    跨域问题可从前后两端分开排查: 前端:Vue + axios axios 请求头使用 'Content-Type': 'application/json', 并且在Header中设置了 Authorization 字段用于传递 Token, 参数未经 Qs 转码, 使用以下代码测试登录接口: // 为方便操作,已将 axios 实例挂载到 this.$axios 上 this.$axios.post('/signin', {account: '', password: ''}) .then(re

  • vue中实现点击空白区域关闭弹窗的两种方法

    1. 第一种做法 首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现 <div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是弹窗里面的内容部分 </div> </div>

  • axios全局注册,设置token,以及全局设置url请求网段的方法

    a1.axios全局注册 axios不同 与vue-resource不能在import axios from 'axios'后使用Vue.use(axios),axios不是插件,要想全局使用axios应该修改其原型链,代码如下 import axios from 'axios' Vue.prototype.$axios=axios 这样 axios就全局注册好了,要使用axios,只需要这样 this.$axios.post("/login", this.form).then((re

  • vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue项目中,需要实现点击对应按钮,滚动到对应页面位置,下面分享一个简单实用的方法 原文地址 http://www.sharedblog.cn/?post=205 <template> <div class="box"> <div class="btn"> <span @click="Submit(1)">按钮一</span> <span @click="Submit(2

  • Vue如何防止按钮重复点击方案详解

    目录 前言 目的 文件结构 实现 请求拦截 响应拦截 取消重复发送请求 调用 前言 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios 是目前最优秀的 HTTP 请求库之一, 我们封装 axios 请求也是为了让代码看的更加清晰, 后期好维护. 目的 实现请求拦截 实现响应拦截 常见错误处理 不能请求头设置 api 集中式管理 (取消重复请求,重复发送请求, 请求缓存等情况均还未实现) 文件结构 实现 index.js内代码如下: 引入

  • Vue中的全局指令防止按钮重复点击

    目录 全局指令防止按钮重复点击 1.common.js 2.在需要引入的页面引入(**.vue) 防重复点击(vue指令实现) 阻止快速点击按钮会重复多次调用接口的 全局指令防止按钮重复点击 1.common.js 首先引入Vue import Vue from 'vue'; const preventReClick = Vue.directive('preventReClick', {   inserted: function (el, binding) {     el.addEventLi

随机推荐