【前端】中断请求的方式

一 使用 Axios 和取消令牌

1.步骤:

1. 初始化取消源,创建CancelToken

const source = axios.CancelToken.source();

2. 传递cancelToken, 发起请求

axios.get('/api/data', {
  cancelToken: source.token
});

3. 触发取消请求

source.cancel('操作被取消');

4. 判断错误是否由于取消请求操作引起的

if (axios.isCancel(error)) {
  console.log('请求已被取消');
}

2.示例:

<template>
  <button @click="fetchData">获取数据</button>
  <button @click="cancelRequest">取消请求</button>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';

// 1.1初始化取消源
const cancelSource = ref(null);
// 发起请求
function fetchData() {
  // 创建CancelToken
  cancelSource.value = axios.CancelToken.source();
  axios.get('https://example.com/api/data', {
  	// 2.传递cancelToken, 发起请求
    cancelToken: cancelSource.value.token,
  })
  .then(response => {
    console.log('响应数据:', response.data);
  })
  .catch(error => {
  	// 4.判断是否取消请求
    if (axios.isCancel(error)) {
      console.log('请求已取消');
    } else {
      console.error('请求失败:', error);
    }
  });
}
// 3.点击按钮触发取消请求
function cancelRequest() {
  if (cancelSource.value) {
    cancelSource.value.cancel('取消请求');
  }
}
</script>

注: 检查是否被取消
在请求的 catch 函数中，通过 axios.isCancel(error) 检查错误是否是由取消操作引起的。
这样就可以在 Vue 3 中手动中断一个请求，并且在取消请求时进行相应的处理。

二 使用 Fetch API 和 AbortController

1. AbortController

AbortController 是一种用于取消 Fetch API 请求的标准方法，也可以与 axios 结合使用来取消请求。

2.使用 AbortController 的基本步骤

// 1.创建 AbortController
const controller = new AbortController();
const signal = controller.signal;

// 2.将信号传递给 fetch 请求
fetch('https://example.com/api/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已中断');
    } else {
      // 处理其他错误
    }
  });
  
// 2.将信号传递给 axios 请求
axios.get('/api/data', {
  signal: signal
}).then(response => {
  // 处理响应
}).catch(error => {
  if (error.name === 'CanceledError') {
    console.log('请求被取消');
  } else {
    console.error('请求失败', error);
  }
});

// 3.在某个时刻决定中断请求
controller.abort();

注: 确保 axios 版本支持 AbortController（建议使用最新版本）。
取消请求后，需要在 catch 中检查错误类型。

三 使用 abort()

abort() 方法用于取消正在进行的 AJAX 请求。

1. 使用XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send();

// 取消请求
xhr.abort();

2.使用jQuery.ajax

var jqXHR = $.ajax({
  url: '/api/data',
  type: 'GET'
});

// 取消请求
jqXHR.abort();