axios如何终止多次请求

àì夳堔傛蜴生んèń 2023-07-22 02:44 132阅读 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 条评论，132人围观）

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

相关阅读

相关【axios】002-axios发起请求

目录一、axios常用语法二、请求配置三、发送Get请求四、发送Post请求五、执行多个并发请求 -------------------- 一、axi

喜欢ヅ旅行/ 2023年10月05日 12:07/ 0 赞/ 16 阅读

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

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

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

相关 axios如何终止多次请求

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

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

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

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

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

相关 axios如何设置请求时发送cookie

axios.defaults.withCredentials = true 以下两种写法都是正确的 ![在这里插入图片描述][watermark_type_ZmFuZ3

男娘i/ 2022年11月28日 10:43/ 0 赞/ 324 阅读

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

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

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

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

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

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

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

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

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

相关 axios如何取消请求

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

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

相关二次封装axios，根据参数来实现多个请求多次拦截

二次封装axios，根据参数来实现多个请求多次拦截 1. 新建 axiosTool.js 文件，设置请求拦截和处理的逻辑 import Vue from '

Myth丶恋晨/ 2021年09月16日 04:14/ 0 赞/ 408 阅读