网络请求未响应？向 fetch请求说再见！

2024-02-04 11:03:21

在开发 React 和 TypeScript 应用时，请求网络资源是开发中必不可少的一环。然而，网络请求通常是异步的，这也意味着你无法控制何时获取数据，有时可能会导致潜在的延迟或问题。为了解决这种情况，你需要一个灵活的解决方案，以便在网络请求尚未得到响应时将其取消。

fetch API 是一个强大且方便的工具，允许你从服务器获取资源。然而，它本身并不提供取消请求的机制。幸运的是，React 和 TypeScript 提供了多种方法来取消 fetch 请求。

取消 fetch 请求的最直接方法是使用 AbortController 接口。这个接口允许你创建信号对象，该对象可以用于中止正在进行的网络请求。为了使用 AbortController，你需要先创建它，然后将其信号对象传递给 fetch() 方法作为第二个参数。

如果需要在网络请求完成之前取消请求，可以调用 abort() 方法来终止网络请求。这将取消请求，并防止任何进一步的数据传输。

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

fetch(url, { signal })
  .then((response) => {
    // handle successful response
  })
  .catch((error) => {
    // handle error
  });

if (shouldCancelRequest) {
  controller.abort();
}

除了 AbortController 之外，还有一些其他的方法可以取消fetch请求。其中一个方法是使用 XMLHttpRequest 对象。XMLHttpRequest 提供了一个 abort() 方法，可以用来取消正在进行的网络请求。

const xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // handle successful response
    } else {
      // handle error
    }
  }
};

xhr.send();

if (shouldCancelRequest) {
  xhr.abort();
}

在某些情况下，你可能需要在请求发出后立即取消请求。为了做到这一点，可以使用 Promise.race() 方法。这个方法允许你创建一个新的 Promise 对象，该对象将解析为第一个成功或第一个拒绝的 Promise。

const fetchPromise = fetch(url);
const cancelPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Request timed out');
  }, 5000);
});

const result = await Promise.race([fetchPromise, cancelPromise]);

if (result instanceof Response) {
  // handle successful response
} else {
  // handle error
}