您现在的位置是:首页 > 正文

axios拦截器之重复请求取消上次请求、路由切换取消接口

2024-02-01 00:08:58阅读 2

在项目中经常会遇到需要主动取消接口的场景,axios提供CancelToken的功能可以主动停止当前请求,从而避免无效请求,优化网络性能

场景:

  1. 远程搜索接口频繁请求,第二个接口先成功导致显示第一个接口返回的数据
  2. 前端切换路由,前一个路由的接口用不到了,但还在请求中

这两种情况可以单独在组件中使用CancelToken来取消接口请求,但是如果要主动请求的接口较多,则会照成代码冗余,于是需要封装成一个公共的方法

1、搭载请求容器及处理方法:cancel-request.js 

  • pengdingList: 盛放接口处于pengding(请求中)状态的容器,key是接口唯一标识,value是该接口的cancel请求的方法

  • getFetchKey: 生成接口唯一标识的方法

  • addPending:把请求加到pending容器的方法

  • removePending:把请求从pengding容器中移除的方法

  • cancelPending:取消请求并从pengding中移除的方法

/**
 * 重复请求取消上次请求
 */
import axios from 'axios'
// 存储pengding请求容器
export const pendingList = new Map()
// 生成各个请求标识
export const getFetchKey = (config) => {
    const { url, data, method } = config
    let token
    if (method === 'get') {
        token = [method, url].join('&')
    } else {
        token = [method, url, JSON.stringify(data)].join('&')
    }
    return token
}
// 添加pengding请求
export const addPending = (config) => {
    const fetchKey = getFetchKey(config)
    if (fetchKey) {
        config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
            if (!pendingList.has(fetchKey)) {
                pendingList.set(fetchKey, cancel)
            }
        })
    }
}
// 移除pengding请求
export const removePending = (config) => {
    const fetchKey = getFetchKey(config)
    if (fetchKey) {
      if (pendingList.has(fetchKey)) {
        pendingList.delete(fetchKey)
      }
    }
}
// 取消请求
export const cancelPending = (config) => {
    const fetchKey = getFetchKey(config)
    if (fetchKey) {
      if (pendingList.has(fetchKey)) {
        const cancel = pendingList.get(fetchKey)
        cancel('cancel')
        pendingList.delete(fetchKey)
      }
    }
}

2、axios拦截器配置-防止频繁请求

  • 请求时判断是否该请求是否重复,如果重复取消之前的请求
  • 请求时把当前请求加入pending容器中
  • 相应成功或失败时把当前请求从pending容器中移除
/**
 * axios拦截器配置
*/
import {
    addPending, removePending, cancelPending,
} from '@util/cancel-request'
import axios from 'axios'
// 请求拦截器
axios.interceptors.request.use(
    request => {
        // 发送请求前首先检查该请求是否已经重复,重复则进行取消并移除
        cancelPending(request)
        // 添加该请求到pendingList中
        addPending(request)
        return request
    },
    error => {
        return Promise.error(error)
    }
)
axios.interceptors.response.use(
    response => {
        // 请求成功去除pengding状态
        removePending(response)
        if (response.status === 200) {
            return Promise.resolve(response)
        } else {
            return Promise.reject(response)
        }
    },
    error => {
        // 请求失败去除pengding状态
        removePending(error.response)
        return Promise.reject(error.response)
    }
)

3、切换路由取消之前页面的pending状态的请求-beforEach(react用路由组件判断)

  • 在beforEach方法中获取所有pending状态的接口(pengding容器)
  • 对pending容器进行循环,依次取消
  • 清空pengding容器
import { pendingList } from '@util/cancel-request'

router.beforeEach((to, from, next) => {
    let pengdingArr = pendingList.values()
    let current = pengdingArr.next()
    while (!current.done) {
        current.value('cancel')
        current = pengdingArr.next()
    }
    pendingList.clear()
    next()
})

网站文章

  • CrawlSpider爬虫实战-猎云网爬虫(过程超详细)

    CrawlSpider爬虫实战-猎云网爬虫(过程超详细)

    CrawlSpider爬虫作用:可以定义规则,让Scrapy自动的去爬取我们想要的链接。而不必跟Spider类一样,手动的yield Request。创建:scrapy genspider -t cr...

    2024-02-01 00:08:51
  • swarm系列-swarm可视化之visualizer(4)

    swarm系列-swarm可视化之visualizer(4)

    visualizer是官方的简单容器状态可视化工具安装docker run -it -d -p 5000:8080 \ -v /var/run/docker.sock:/var/run/docker.sock \ dockersamples/visualizer访问ip:5000访问页面查看 ...

    2024-02-01 00:08:44
  • 数据集ISCX(12年到17年)已经打包,可下载

    数据集ISCX(12年到17年)已经打包,可下载

    感兴趣的可私聊下载。

    2024-02-01 00:08:15
  • 配置grails后,dos命令行出现如下错误

    配置grails后,dos命令行出现如下错误。我的java的环境变量设置也是正确的,平时运行java程序也没有出过问题,但是这里确提示我的JAVA_HOME是一个无效的目录,到网上看了一下,原来是JAVA_HOME所配置的名字不识别。C:\Users\JavaPlus>grails -versionERROR: JAVA_HOME is set to an invalid di

    2024-02-01 00:08:09
  • Redis

    什么是RedisRedis是一款内存高速缓存数据库,是Nosql数据库中使用较为广泛的非关系型内存数据库。Redis全称为:Remote Dictionary Server (远程数据服务),使用C语...

    2024-02-01 00:08:01
  • 对象的循环

    1.最基本: for(var i = 0,arr=['Z','S','T','Y'];i<arr.length;i++){ con...

    2024-02-01 00:07:33
  • springboot 任务定时Schedule

    SpringBoot 中使用 Schedule 定时任务非常简单,首先我们创建一个 SpringBoot 项目, 费话少说,上代码 首先写一下简单类,,在类上添加 @Scheduled 注解即可,如下...

    2024-02-01 00:07:27
  • 火速围观!Qtum量子链全球首席开发工程师Jordan Earls受邀出席2019纽约区块链周...

    2019年纽约区块链周,吸引了加密货币和区块链世界的主要公司、开发者、创业者和投资者参与,每一年都备受瞩目。今年Qtum量子链联合创始人、全球首席开发工程师Jordan Earls受邀将参与2019年...

    2024-02-01 00:07:21
  • 计算机科学第三讲——布尔逻辑和逻辑门

    计算机科学第三讲——布尔逻辑和逻辑门

    目录 1、二进制 2、布尔逻辑 3、NOT 4、AND 5、OR 6、XOR 今天我们开始讲"抽象",不用管底层细节,把精力用来构建更复杂的系统。 1、二进制 上一讲,我们讲了计算...

    2024-02-01 00:06:54
  • 熊逸《唐诗50讲》田园篇 - 学习笔记与感想

    熊逸《唐诗50讲》田园篇 - 学习笔记与感想

    此篇已加入熊逸《唐诗50讲》学习笔记索引目录。 一、田园篇具体内容   田园牧歌对于在现代社会里打拼的人们来说,距离一万光年,但是身心俱疲的时候,读两首田园诗却是最好的治愈,因为诗里岁月柔软、风物...

    2024-02-01 00:06:47