JavaScript 请求取消怎么取消脚本加载请求-js教程-PHP中文网

使用 abortcontroller 实例的 abort() 方法可以取消正在进行的 fetch 请求，从而中断脚本加载。只需在发起请求前创建控制器，将 signal 传入 fetch 配置中，当需要取消时调用 controller.abort() 即可触发异常。

JavaScript 请求取消怎么取消脚本加载请求

fetch 请求如何绑定信号

通过 new AbortController() 获取控制器对象，将其中的 signal 属性作为参数传递给 fetch 函数，这样请求就与控制器关联起来。

JavaScript 请求取消怎么取消脚本加载请求

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

fetch('https://example.com/script.js', { signal })
  .then(response => response.text())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消');
    } else {
      console.error('发生错误:', error);
    }
  });

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

上述代码展示了标准的 fetch 请求流程。首先创建控制器并提取 signal，然后在 fetch 选项中传入该信号。随后设置一个定时器在 3 秒后调用 abort 方法。如果请求在 3 秒内未完成，就会抛出 AbortError 并被 catch 块捕获。预期结果是控制台输出“请求已取消”，且网络面板中该请求状态变为 canceled。

XMLHttpRequest 如何取消

对于传统的 XMLHttpRequest 对象，可以直接调用其 abort() 方法来终止请求。这种方式不需要额外的控制器对象，直接操作请求实例即可。

JavaScript 测试模式

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

下载

JavaScript 请求取消怎么取消脚本加载请求

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');
xhr.onload = function() {
  console.log('加载完成:', xhr.responseText);
};
xhr.onerror = function() {
  console.log('加载失败或取消');
};
xhr.send();

// 模拟取消操作
setTimeout(() => {
  xhr.abort();
}, 2000);

这段代码演示了如何使用 XHR 取消请求。创建 XHR 实例后打开连接并发送请求，同时注册 onload 和 onerror 回调。两秒后调用 xhr.abort() 中断请求。此时 onerror 会被触发，因为 abort 被视为一种错误情况。预期结果是控制台输出“加载失败或取消”，且请求被立即终止。

取消后如何处理错误类型

当请求被取消时，系统会抛出一个名为 AbortError 的错误对象。开发者需要在 catch 块中检查错误名称，以区分正常错误和用户主动取消的情况。

try {
  const controller = new AbortController();
  fetch('https://example.com/api', { signal: controller.signal })
    .then(res => res.json())
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('用户取消了请求');
      } else {
        console.error('网络错误:', err.message);
      }
    });
} catch (e) {
  console.error('未捕获错误:', e);
}

在实际应用中，区分错误类型非常重要。AbortError 是浏览器规范定义的特定错误类型，其 name 属性值为