如何取消无用的HTTP请求

最新推荐文章于 2025-11-23 06:53:19 发布

原创最新推荐文章于 2025-11-23 06:53:19 发布 · 280 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#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) thrownewError('请求失败');
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
asyncfunctionuploadFile() {
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;

asyncfunctionhandleSearch(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：文件上传取消

classFileUploader{
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：页面切换取消请求

classPageRequestManager{
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);
      }
    }
  }
};