在频繁请求同一个接口的时候，axios如何终止上一个请求

本文链接：https://blog.csdn.net/2301_81431930/article/details/142047925

1.问题描述

在频繁请求同一个接口的时候，需要在执行当前请求时终止上一个请求，避免上一个请求因为网络或者其他原因导致在当前请求执行完之后才请求完成，就会导致页面会展示出上一次请求的内容

2.解决办法

axios 提供了取消请求的功能，通过 AbortController 和 AbortSignal API 来实现这一点。

AbortController 是一个允许你取消由 AbortSignal 实例控制的请求的类。
AbortSignal 是一个信号对象，可以被 AbortController 控制，并可以用来通知某个操作应该被取消。

引用axios

import axios from 'axios';

代码中使用

const fetchData = () => {
      // 创建一个AbortController实例
      controller.value = new AbortController();
      // 获取AbortSignal
      const signal = controller.value.signal;

      // 发起请求
      axios.get('https://api.example.com/data', { signal })
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          if (error.name !== 'CanceledError') {
            console.error('Request failed:', error);
          }
        });
    },
const cancelRequests = () => {
      // 取消所有请求
      if (controller.value) {
        controller.value.abort(); // 触发AbortSignal
        controller.value = null; // 清除控制器引用
      }
    }

效果展示