JS 请求挂起，你能做到吗？

2023-04-10 19:48:49

JS 请求暂停指南：掌控你的前端请求，释放无限可能

一、掌握 setTimeout 的延迟奥秘

在 JS 的世界里，setTimeout 就像一位神奇的魔法师，它可以将你的代码推迟到未来某个指定的时间再执行。善用这一法术，我们便可在发出请求之前设置一个延时，为改变主意留出宝贵的时间。如果在延时期间，你的想法发生了转变，只需轻轻挥动clearTimeout魔杖，即可阻止请求的发送，让它永不踏上网络征途。

代码示例：

const delay = 1000; // 1 秒的延时
const requestTimeout = setTimeout(() => {
  // 发送请求的代码
}, delay);

// 如果在延时时间内改变了主意，可以清除 setTimeout
if (shouldCancelRequest) {
  clearTimeout(requestTimeout);
}

二、探索 fetch 内置的 AbortController：优雅取消请求

fetch API 就像一个贴心的管家，它贴心地为我们提供了AbortController接口，让你能在请求进行中时潇洒地取消它。使用AbortController，你可以创造一个信号对象，并将其交给 fetch 请求。当你心意一动，想要取消请求时，只需呼唤信号对象的abort()方法，它便会立即终止请求，让其功亏一篑。

代码示例：

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

fetch('https://example.com/api/data', {
  signal
})
.then(response => {
  // 请求成功时的处理逻辑
})
.catch(error => {
  // 请求失败时的处理逻辑
});

// 如果在请求进行中时改变了主意，可以取消请求
if (shouldCancelRequest) {
  controller.abort();
}

三、XMLHttpRequest 的 abort 方法：强势中止请求

XMLHttpRequest 是 JS 中另一个强大的请求发起者，它同样拥有一个名为abort()的利器，可以让你在请求进行中时强势中止它。使用 XMLHttpRequest，你可以通过以下方式取消请求：

代码示例：

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com/api/data');
xhr.send();

// 如果在请求进行中时改变了主意，可以中止请求
if (shouldCancelRequest) {
  xhr.abort();
}