JavaScript中止網(wǎng)絡(luò)請求的常見方法

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

在JavaScript中,中止網(wǎng)絡(luò)請求通常依賴于所使用的網(wǎng)絡(luò)請求庫或框架,本文給大家介紹了是一些常見的方法和庫,以及它們?nèi)绾沃С种兄咕W(wǎng)絡(luò)請求,并通過代碼講解的非常詳細(xì),需要的朋友可以參考下

1. 使用fetch API 和 AbortController

現(xiàn)代瀏覽器支持fetch API，并且提供了一個(gè)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);
    }
  });

// 在需要中止請求的時(shí)候調(diào)用
controller.abort();

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

2. 使用XMLHttpRequest 和 abort 方法

對于較老的代碼或需要更細(xì)粒度控制的場景，可能正在使用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();

// 在需要中止請求的時(shí)候調(diào)用
xhr.abort();

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

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 {
    // 處理錯(cuò)誤
  }
});

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

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