JavaScript Fetch API 怎么实现接口请求结果取消处理-js教程-PHP中文网

使用 abortcontroller 实例的 signal 属性传递给 fetch 请求，并在需要时调用 abort() 方法来取消请求。通过监听 signal 的 abort 事件或捕获 fetch 抛出的 aborterror 异常，可以执行清理逻辑或更新 ui 状态。

JavaScript Fetch API 怎么实现接口请求结果取消处理

如何发起一个可被外部中断的请求

在发起请求前创建 AbortController 对象，将其 signal 放入 fetch 的配置选项中。这样网络层会在信号触发时立即终止连接，并抛出错误供上层处理。

JavaScript Fetch API 怎么实现接口请求结果取消处理

const controller = new AbortController();
const signal = controller.signal;

// 模拟异步操作后取消
setTimeout(() => {
  controller.abort();
}, 3000);

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消');
    } else {
      console.error('其他错误:', error);
    }
  });

如何处理取消后的资源清理与状态同步

当请求被取消时，除了捕获异常，还需要确保相关的加载状态重置，防止界面卡在“加载中”。可以在 finally 块中统一处理状态恢复，保证无论成功、失败还是取消，UI 都能回到初始态。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

JavaScript Fetch API 怎么实现接口请求结果取消处理

let isLoading = true;
const controller = new AbortController();

try {
  const response = await fetch('/api/data', { signal: controller.signal });
  const data = await response.json();
  updateUI(data);
} catch (error) {
  if (error.name !== 'AbortError') {
    showError(error.message);
  }
} finally {
  isLoading = false;
  // 检查是否因取消而退出，避免覆盖用户手动触发的新请求
  if (!controller.signal.aborted) {
    renderCompleteState();
  }
}