如何取消无用的HTTP请求

摘要：在开发前端应用时，我们经常会遇到需要取消HTTP请求的情况。比如文件上传过程中用户想取消上传，或者搜索框在用户连续输入时取消之前的搜索请求。取消无用的请求既能节省服务器资源，又能提升用户体验。

在开发前端应用时，我们经常会遇到需要取消HTTP请求的情况。比如文件上传过程中用户想取消上传，或者搜索框在用户连续输入时取消之前的搜索请求。取消无用的请求既能节省服务器资源，又能提升用户体验。

为什么要取消请求？

想象这样一个场景：用户上传一个大文件，上传到一半时发现选错了文件。如果不取消当前的上传请求，用户要么等待上传完成（浪费时间），要么关闭页面（体验不好）。最好的做法是立即取消当前请求，让用户重新选择文件。

下面介绍几种常用的取消请求方法。

1. 原生AJAX的abort方法

XMLHttpRequest提供了abort()方法来取消请求：

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
const url = "https://api.example.com/data";

// 初始化请求
xhr.open('GET', url);

// 监听取消事件
xhr.addEventListener('abort', function() {
  console.log('请求已被取消');
});

// 发送请求
xhr.send();

// 在需要的时候取消请求
setTimeout(() => {
  xhr.abort(); // 取消请求
  console.log('取消后的状态码:', xhr.status); // 变为0
}, 100);

当调用abort()后，请求会立即停止，status状态码会变成0。

2. Fetch API使用AbortController

Fetch API需要使用AbortController来取消请求：

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

// 发起请求
fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: '张三', age: 25 }),
  signal: signal // 关联信号量
})
.then(response => {
  if (!response.ok) throw new Error('请求失败');
  return response.json();
})
.then(data => {
  console.log('提交成功:', data);
})
.catch(error => {
  if (error.name === 'AbortError') {
    console.log('请求已被取消');
  } else {
    console.error('请求错误:', error);
  }
});

// 取消请求
setTimeout(() => {
  controller.abort();
}, 1000);

重要提示：一个AbortController只能使用一次。取消请求后，如果需要发起新的可取消请求，需要创建新的AbortController实例。

3. Axios使用AbortController（推荐）

Axios从0.22.0版本开始推荐使用AbortController：

// 创建控制器
const controller = new AbortController();

// 方法一：监听取消事件
controller.signal.addEventListener("abort", () => {
  console.log("请求已取消");
});

// 方法二：使用try-catch
async function uploadFile() {
  try {
    const response = await axios.post('/api/upload', formData, {
      signal: controller.signal
    });
    console.log('上传成功', response.data);
  } catch (error) {
    if (error.message === "canceled") {
      console.log("请求已被取消");
    } else {
      console.error("上传错误:", error);
    }
  }
}

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

4. Axios的CancelToken（旧版本）

0.22.0之前的Axios使用CancelToken，现在已不推荐使用：

import axios from "axios";

// 创建取消令牌
const source = axios.CancelToken.source();

try {
  const response = await axios.post('/api/upload', formData, {
    cancelToken: source.token
  });
} catch (error) {
  if (axios.isCancel(error)) {
    console.log('请求已取消:', error.message);
  }
}

// 取消请求
source.cancel('用户取消了操作');

实际应用场景

场景1：搜索框防抖

let controller = null;

async function handleSearch(keyword) {
  // 取消之前的请求
  if (controller) {
    controller.abort();
  }
  
  // 创建新的控制器
  controller = new AbortController();
  
  try {
    const response = await fetch(`/api/search?q=${keyword}`, {
      signal: controller.signal
    });
    const results = await response.json();
    displayResults(results);
  } catch (error) {
    if (error.name !== 'AbortError') {
      console.error('搜索错误:', error);
    }
  }
}

// 防抖处理
const debouncedSearch = debounce(handleSearch, 300);
searchInput.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

场景2：文件上传取消

class FileUploader {
  constructor() {
    this.controller = null;
  }
  
  async upload(file) {
    // 取消正在进行的上传
    if (this.controller) {
      this.controller.abort();
    }
    
    this.controller = new AbortController();
    const formData = new FormData();
    formData.append('file', file);
    
    try {
      const response = await axios.post('/api/upload', formData, {
        signal: this.controller.signal,
        onUploadProgress: (progressEvent) => {
          const percent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          updateProgress(percent);
        }
      });
      return response.data;
    } catch (error) {
      if (error.message !== 'canceled') {
        throw error;
      }
    }
  }
  
  cancel() {
    if (this.controller) {
      this.controller.abort();
    }
  }
}

场景3：页面切换取消请求

class PageRequestManager {
  constructor() {
    this.controllers = new Map();
  }
  
  addRequest(requestId, controller) {
    this.controllers.set(requestId, controller);
  }
  
  cancelRequest(requestId) {
    const controller = this.controllers.get(requestId);
    if (controller) {
      controller.abort();
      this.controllers.delete(requestId);
    }
  }
  
  cancelAll() {
    for (const controller of this.controllers.values()) {
      controller.abort();
    }
    this.controllers.clear();
  }
}

// 在Vue组件中使用
export default {
  data() {
    return {
      requestManager: new PageRequestManager()
    };
  },
  
  beforeUnmount() {
    // 组件销毁时取消所有请求
    this.requestManager.cancelAll();
  },
  
  methods: {
    async loadData() {
      const controller = new AbortController();
      const requestId = 'user-data';
      
      this.requestManager.addRequest(requestId, controller);
      
      try {
        const response = await axios.get('/api/user', {
          signal: controller.signal
        });
        this.userData = response.data;
      } catch (error) {
        if (error.message !== 'canceled') {
          this.handleError(error);
        }
      } finally {
        this.requestManager.cancelRequest(requestId);
      }
    }
  }
};

注意事项

错误处理：取消请求会触发错误，需要正确区分是取消错误还是其他错误。
状态清理：取消请求后要及时清理相关状态，比如上传进度、加载状态等。
用户体验：给用户明确的反馈，比如显示"已取消"的提示。
内存管理：及时移除事件监听器，避免内存泄漏。

最佳实践

统一管理所有可取消的请求
在组件销毁时自动取消相关请求
为用户提供明确的取消反馈
在合适的场景使用取消功能，不要过度使用

取消HTTP请求是一个很实用的功能，正确使用可以显著提升应用性能和用户体验。希望这些示例能帮助你在实际项目中更好地应用这个功能。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_13017