JavaScript中止網絡請求的常見方法

更新時間：2024年10月31日 10:34:50 作者：AitTech

在JavaScript中,中止網絡請求通常依賴于所使用的網絡請求庫或框架,本文給大家介紹了是一些常見的方法和庫,以及它們如何支持中止網絡請求,并通過代碼講解的非常詳細,需要的朋友可以參考下

1. 使用fetch API 和 AbortController

現代瀏覽器支持fetch API，并且提供了一個AbortController接口來中止請求。

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

fetch('/some/api/endpoint', { signal })
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// 在需要中止請求的時候調用
controller.abort();

在這個例子中，AbortController創(chuàng)建了一個信號對象signal，它被傳遞給fetch請求的options對象。當調用controller.abort()時，請求會被中止，并且fetch的Promise會被拒絕，拋出一個AbortError。

2. 使用XMLHttpRequest 和 abort 方法

對于較老的代碼或需要更細粒度控制的場景，可能正在使用XMLHttpRequest。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/some/api/endpoint', true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Request failed:', xhr.statusText);
    }
  }
};

xhr.send();

// 在需要中止請求的時候調用
xhr.abort();

在這個例子中，xhr.abort()方法會立即中止請求。如果請求已經完成（即readyState已經是4），則調用abort()不會有任何效果。

3. 使用第三方庫（如Axios）

如果使用的是像Axios這樣的第三方HTTP客戶端庫，它通常也提供了中止請求的功能。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/some/api/endpoint', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 在需要中止請求的時候調用
source.cancel('Operation canceled by the user.');

在這個例子中，CancelToken用于創(chuàng)建一個可以取消請求的令牌。當調用source.cancel()時，請求會被中止，并且Promise會被拒絕，拋出一個包含取消信息的錯誤。