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

 更新时间:2022年02月15日 10:06:31   作者:harsima  
在实际项目中,我们可能需要对请求进行“防抖”处理。本文主要实现axios中取消请求及阻止重复请求,具有一定的参考价值,感兴趣的可以了解一下

前言

在实际项目中,我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮,导致前端向后端重复发送多次请求。这里我列举两种比较常见的实际情况:

  • PC端 - 用户双击搜索按钮,可能会触发两次搜索请求
  • 移动端 - 因移动端没有点击延迟,所以极易造成误操作或多操作,造成请求重发

以上情况有可能在有Loading遮罩时依然发生,所以我们要考虑前端阻止重复请求的方法。

核心——CancelToken

在Axios中取消请求最核心的方法是CanelToken。在官网文档中有写到两种方法使用CancelToken,这里简单粘贴出来,并增加了注释

方法1:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  // 必须对请求进行cancelToken设置
  cancelToken: source.token
}).catch(function (thrown) {
  // 如果请求被取消则进入该方法判断
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// 取消上面的请求
// source.cancel('messge') message为可选项,必须为String
source.cancel('Operation canceled by the user.');

方法2:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  // 在options中直接创建一个cancelToken对象
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

// 取消上面的请求
cancel();

实际应用和封装

上文已对axios中的核心方法进行了举例,但是在实际中我们往往不会像官网例子中那样使用,更多的是在axios的拦截器中做全局配置管理。这样的话我们需要对上面的代码进行一些改变。

这里说一下我实现的大体思路:

  • 我们需要对所有正在进行中的请求进行缓存。在请求发起前判断缓存列表中该请求是否正在进行,如果有则取消本次请求。
  • 在任意请求完成后,需要在缓存列表中删除该次请求,以便可以重新发送该请求

思路说完,我们直接上代码

// 正在进行中的请求列表
let reqList = []

/**
 * 阻止重复请求
 * @param {array} reqList - 请求缓存列表
 * @param {string} url - 当前请求地址
 * @param {function} cancel - 请求中断函数
 * @param {string} errorMessage - 请求中断时需要显示的错误信息
 */
const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
  const errorMsg = errorMessage || ''
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      cancel(errorMsg)
      return
    }
  }
  reqList.push(url)
}

/**
 * 允许某个请求可以继续进行
 * @param {array} reqList 全部请求列表
 * @param {string} url 请求地址
 */
const allowRequest = function (reqList, url) {
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      reqList.splice(i, 1)
      break
    }
  }
}

const service = axios.create()

// 请求拦截器
service.interceptors.request.use(
  config => {
 let cancel
   // 设置cancelToken对象
    config.cancelToken = new axios.CancelToken(function(c) {
     cancel = c
    })
    // 阻止重复请求。当上个请求未完成时,相同的请求不会进行
    stopRepeatRequest(reqList, config.url, cancel, `${config.url} 请求被中断`)
    return config
  },
  err => Promise.reject(err)
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 增加延迟,相同请求不得在短时间内重复发送
    setTimeout(() => {
      allowRequest(reqList, response.config.url)
    }, 1000)
    // ...请求成功后的后续操作
    // successHandler(response)
  },
  error => {
    if (axios.isCancel(thrown)) {
      console.log(thrown.message);
    } else {
      // 增加延迟,相同请求不得在短时间内重复发送
      setTimeout(() => {
        allowRequest(reqList, error.config.url)
      }, 1000)
    }
    // ...请求失败后的后续操作
    // errorHandler(error)
  }
)

一些小细节

为什么没用前文方法2中的代码进行cancelToken设置?
axios的文档中有一条备注:

Note: you can cancel several requests with the same cancel token.
你可以使用相同的Token来取消多个请求

所以我不想在每个请求前都new一个新的对象
请务必使用方法2,保证每次cancel都能正确执行。之前方法会导致当出现cancel后,后续请求也会持续cancel

为什么在response中需要增加延迟?
因为不想让用户在极短的时间内重复进行相同请求。
请注意,在response中阻止请求和在request中的阻止请求是两个概念:
request中是阻止上个请求 未完成 时又开始了相同的请求
response中是阻止上个请求 完成后 一段时间内不允许相同请求

我能否在cancel时传递一个对象,而不仅仅是message?
以官方提供的接口来看是不可以的,你可以仿照官方源码进行重新封装,或者使用第三方插件,或者使用另一个方法:将对象转换为JSON字符串,然后在需要的地方再转换回来

到此这篇关于浅谈axios中取消请求及阻止重复请求的方法的文章就介绍到这了,更多相关axios中取消请求及阻止重复请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue使用echarts实现柱状图动态排序效果

    vue使用echarts实现柱状图动态排序效果

    echarts在前端开发中实属必不可缺的大数据可视化工具,这篇文章主要为大家详细介绍了vue如何使用echarts实现柱状图动态排序效果,感兴趣的可以了解下
    2023-10-10
  • vue实现滚动加载的表格

    vue实现滚动加载的表格

    在系统开发中遇到了这么一个问题:后端一次性返回上百条的数据,我需要把返回的数据全部显示在表格里,而且甲方爸爸明确指定了表格是不允许使用分页的。可是当使用a-table装载上百条数据时,页面出现了明显的卡顿现象。只能使用滚动加载的方案来代替了。
    2021-06-06
  • 在vue项目中使用Jquery-contextmenu插件的步骤讲解

    在vue项目中使用Jquery-contextmenu插件的步骤讲解

    今天小编就为大家分享一篇关于在vue项目中使用Jquery-contextmenu插件的步骤讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue 中指令v-bind动态绑定及与v-for结合使用详解

    Vue 中指令v-bind动态绑定及与v-for结合使用详解

    这篇文章主要为大家介绍了Vue 中指令v-bind动态绑定及与v-for结合使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 使用vscode格式化文档无效的解决办法(vue代码格式化文档无效)

    使用vscode格式化文档无效的解决办法(vue代码格式化文档无效)

    这篇文章主要给大家介绍了关于使用vscode格式化文档无效的解决办法,也就是vue代码格式化文档无效,这是最近突然遇到的一个问题,这里给大家介绍一下解决的办法,需要的朋友可以参考下
    2023-08-08
  • vue实现动态显示与隐藏底部导航的方法分析

    vue实现动态显示与隐藏底部导航的方法分析

    这篇文章主要介绍了vue实现动态显示与隐藏底部导航的方法,结合实例形式分析了vue.js针对导航隐藏与显示的路由配置、事件监听等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • Vue中provide、inject详解以及使用教程

    Vue中provide、inject详解以及使用教程

    provide和inject主要为高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中,下面这篇文章主要给大家介绍了关于Vue中provide、inject详解以及使用的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue中虚拟DOM的简单实现

    Vue中虚拟DOM的简单实现

    Vue中的虚拟DOM是通过JavaScript对象来描述真实DOM结构的一种方式,本文将介绍Vue中虚拟DOM的简单实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-05-05
  • vue中如何实现后台管理系统的权限控制的方法步骤

    vue中如何实现后台管理系统的权限控制的方法步骤

    这篇文章主要介绍了vue中如何实现后台管理系统的权限控制的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 详解vue axios用post提交的数据格式

    详解vue axios用post提交的数据格式

    这篇文章主要介绍了详解vue axios用post提交的数据格式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论