axios如何终止多次请求

àì夳堔傛蜴生んèń 2023-07-22 02:44 103阅读 0赞

#### 一、需求分析 ####

在项目中经常有一些场景会连续发送多个请求，而异步会导致最后得到的结果不是我们想要的，并且对性能也有非常大的影响。例如一个搜索框，每输入一个字符都要发送一次请求，但输入过快的时候其实前面的请求并没有必要真的发送出去，这时候就需要在发送新请求的时候直接取消上一次请求。

#### 二、需求实现 ####

<script>
    import axios from 'axios'
    import qs from 'qs'
    
    export default { 
        methods: { 
            request(keyword) { 
                var that = this;
                var CancelToken = axios.CancelToken
                var source = CancelToken.source()
                  
                // 取消上一次请求
                this.cancelRequest();
                
                axios.post(url, qs.stringify({ kw:keyword}), { 
                    headers: { 
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Accept': 'application/json'
                    },
                    cancelToken: new axios.CancelToken(function executor(c) { 
                        that.source = c;
                    })
                }).then((res) => { 
                    // 在这里处理得到的数据
                    ...
                }).catch((err) => { 
                    if (axios.isCancel(err)) { 
                        console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
                    } else { 
                        //handle error
                        console.log(err);
                    }
                })
            },
            cancelRequest(){ 
                if(typeof this.source ==='function'){ 
                    this.source('终止请求')
                }
            },
        }
    }
    </script>

#### 三、需求实现 ####

通过这样的操作方法，实现了`axios`终止多次请求，如图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/352dc35dda3741c682ff113cc1f0ac97.png

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue如何避免用户多次点击请求

在Web应用程序开发中，用户往往会通过点击按钮或触发事件来执行特定的操作，例如提交表单或发送网络请求。然而，如果用户在短时间内多次点击按钮，可能会导致重复的请求发送到服务器，造

亦凉/ 2024年03月02日 10:03/ 0 赞/ 19 阅读

相关 axios防止多次请求 · Vue2.x · 看云

　　\[TOC\] 　　\\\\ Vue 中 Axios 防止多次请求　　1. main.js 入口文件全局绑定axios 　　~~~ 　　import Vue fr

川长思鸟来/ 2023年09月25日 12:10/ 0 赞/ 14 阅读

相关 axios 请求拦截取消重复请求（多次重复异步，结束pending状态）

　　前端开发中，会涉及很多异步事件处理，页面展示的处理关系最密切的就是loading图层，但是loading交互在一些时候会不太友好，后端同学也不喜欢loading状态(后端同

梦里梦外;/ 2023年09月24日 07:50/ 0 赞/ 27 阅读

相关 Axios 如何取消重复请求？

在 Web 项目开发过程中，我们经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题。比如重复的 `post` 请求可能会导致服务端产生两笔记

ゝ一纸荒年。/ 2023年09月23日 20:19/ 0 赞/ 96 阅读

相关 axios如何终止多次请求

一、需求分析在项目中经常有一些场景会连续发送多个请求，而异步会导致最后得到的结果不是我们想要的，并且对性能也有非常大的影响。例如一个搜索框，每输入一个字符都要发送一次请

àì夳堔傛蜴生んèń/ 2023年07月22日 02:44/ 0 赞/ 104 阅读

相关 Axios 如何实现请求重试？

在 [Axios 如何取消重复请求？][Axios] 这篇文章中，阿宝哥介绍了在 Axios 中如何取消重复请求及 `CancelToken` 的工作原理。而本文将介绍在 Ax

男娘i/ 2023年01月15日 14:27/ 0 赞/ 402 阅读

相关【JS】625- Axios 如何缓存请求数据？

在 [Axios 如何取消重复请求？][Axios] 这篇文章中，阿宝哥介绍了在 Axios 中如何取消重复请求及 `CancelToken` 的工作原理。本文将介绍在 Axi

电玩女神/ 2022年11月18日 05:57/ 0 赞/ 118 阅读

相关 Vue-如何使用axios实现同步请求

getInfoFn: async function(){ var that = this; await that.$api.sched

淩亂°似流年/ 2022年10月24日 11:42/ 0 赞/ 287 阅读

相关 Axios 如何缓存请求数据？

本文是 Axios 四部曲的最后一篇文章，这篇文章将介绍在 Axios 中如何通过增强默认适配器来缓存请求数据。那么为什么要缓存请求数据呢？这是因为在缓存未失效时，我们可以

亦凉/ 2022年10月09日 02:49/ 0 赞/ 328 阅读

相关 axios如何取消请求

场景：小邹最近在使用axios时碰到一个问题，就是我想在特性条件时取消请求，以便减少不必要的前后接口交互。我们知道ajax取消请求的方式有两种：一种是通过设置时间，超时自动断开

拼搏现实的明天。/ 2022年04月22日 04:08/ 0 赞/ 425 阅读