Fetch超时设置和终止请求有何奥秘？细说Fetch的新世界！

2023-09-25 18:47:35

作为一名技术博主，我乐意从独到的角度为您展现Fetch超时设置和终止请求的奥秘。我们先对Fetch有一个清晰的认识，才能深入掌握它的超时设置和终止请求，那么什么是Fetch呢？

Fetch是JavaScript中用于获取资源的API，可以向服务器发送请求并接收响应，通常用来加载HTML、CSS、JSON、图片等。它比XMLHttpRequest具有更现代的语法和更强大的功能，并得到了所有主流浏览器的支持。

好的，现在我们聊一聊超时设置，Fetch的超时设置允许你指定请求的超时时间，如果在指定时间内没有收到服务器的响应，那么请求将被终止。这对于避免长时间等待服务器响应非常有用。我们可以使用fetch()方法的timeout属性来设置超时时间，单位是毫秒。

接着我们再聊一聊终止请求，Fetch的终止请求允许你手动取消请求，即使服务器尚未做出响应。这对于某些情况非常有用，例如用户取消请求或请求不再需要时。我们可以使用fetch()方法的abort()方法来终止请求。

当然，要理解这些知识，少不了案例的帮助：

fetch('https://example.com/api/data', {
  timeout: 5000 // 超时时间为5秒
})
.then(response => {
  // 请求成功
})
.catch(error => {
  if (error.name === 'AbortError') {
    // 请求已被取消
  } else {
    // 其他错误
  }
});

// 终止请求
const controller = new AbortController();
const signal = controller.signal;

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

controller.abort(); // 取消请求