前几天系统又爆出一个问题，有个页面数据迟迟没有响应，系统就一直在转圈圈，用户体验极差，于是就找到前端同学得赶紧解决这个问题，这体验，用户不得跑完了？于是今天这篇文章总结了下在前端开发中，如果发出的请求在一定时间内没响应，取消该请求是一个很好的实践，可以避免不必要的资源浪费和潜在的内存泄漏。

应用场景

假设你正在开发一个电商平台的搜索功能，用户在搜索框输入关键词后，前端会发送一个请求到后端获取搜索结果。如果用户在等待搜索结果的过程中又输入了新的关键词，那么之前的请求就可能变得不再需要。为了避免这种情况，可以在用户输入新关键词时取消之前的请求。

示例代码

以下示例使用 axios 库来发送请求，并使用 AbortController（对于使用原生 fetch API）或 axios 的取消功能来取消请求：

使用 axios 取消请求

// 创建一个 axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000 // 设置请求超时时间为 10 秒
});

// 定义一个变量来存储取消函数
let cancelTokenSource;

// 发起请求的函数
function fetchData(keyword) {
  // 如果之前有未完成的请求，先取消
  if (cancelTokenSource) {
    cancelTokenSource.cancel('Cancelled by new request');
  }

  // 创建新的取消 token
  cancelTokenSource = axios.CancelToken.source();

  axiosInstance.get('/search', {
    params: { keyword },
    cancelToken: cancelTokenSource.token
  })
  .then(response => {
    console.log('Search results:', response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.error('Error fetching data:', error);
    }
  });
}

// 模拟用户输入关键词
fetchData('initial keyword');

// 模拟用户在 5 秒后输入新的关键词
setTimeout(() => {
  fetchData('new keyword');
}, 5000);

在这个示例中，每次调用 fetchData 函数时，都会先检查是否有未完成的请求，如果有，则取消之前的请求。然后创建一个新的取消 token 并发起新的请求。

使用原生 fetch API 取消请求

// 定义一个变量来存储 AbortController 实例
let controller;

// 发起请求的函数
function fetchData(keyword) {
  // 如果之前有未完成的请求，先取消
  if (controller) {
    controller.abort();
  }

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

  fetch('https://api.example.com/search', {
    method: 'GET',
    signal,
    params: { keyword }
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Search results:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request canceled');
    } else {
      console.error('Error fetching data:', error);
    }
  });
}

// 模拟用户输入关键词
fetchData('initial keyword');

// 模拟用户在 5 秒后输入新的关键词
setTimeout(() => {
  fetchData('new keyword');
}, 5000);

在这个示例中，使用 AbortController 的 abort 方法来取消之前的请求。当用户输入新的关键词时，会先取消之前的请求，然后发起新的请求。

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦

小伙伴们在工作中还遇到过其他应用场景吗，欢迎评论区留言讨论哦。