正文

JavaScript中取消请求的方法：掌握Axios、Fetch API和XMLHttpRequest的取消技巧

/0 浏览量
0527

在JavaScript中，进行异步请求时，可能会遇到需要取消请求的场景，例如用户在请求还未完成时突然关闭页面、停止加载数据等。本文将详细介绍如何使用Axios、Fetch API和XMLHttpRequest三种常用方式来实现请求的取消。

Axios取消请求

Axios是一个基于Promise的HTTP客户端，它提供了取消请求的功能。以下是使用Axios取消请求的基本步骤：

  1. 使用axios.CancelToken创建一个取消令牌。
  2. 将这个取消令牌传递给axios请求。
  3. 在需要取消请求时，调用取消令牌的cancel方法。
import axios from 'axios';

// 创建一个取消令牌
const cancelTokenSource = axios.CancelToken.source();

// 发起请求
axios.get('/data', {
  cancelToken: cancelTokenSource.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已取消', error.message);
  }
});

// 取消请求
setTimeout(() => {
  cancelTokenSource.cancel('请求被取消');
}, 1000);

Fetch API取消请求

Fetch API是现代浏览器提供的一个用于网络请求的API，它同样支持请求的取消功能。以下是使用Fetch API取消请求的基本步骤：

  1. 使用AbortController创建一个控制器。
  2. 将这个控制器传递给fetch请求。
  3. 在需要取消请求时，调用控制器的abort方法。
const controller = new AbortController();

fetch('/data', { signal: controller.signal })
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求被取消', error.message);
    }
  });

// 取消请求
setTimeout(() => {
  controller.abort('请求被取消');
}, 1000);

XMLHttpRequest取消请求

XMLHttpRequest是较老的网络请求方式，但它同样支持请求的取消功能。以下是使用XMLHttpRequest取消请求的基本步骤：

  1. 使用XMLHttpRequest对象创建一个请求。
  2. 使用XMLHttpRequest的abort方法取消请求。
let xhr = new XMLHttpRequest();
xhr.open('GET', '/data');

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  }
};

xhr.onerror = function() {
  console.log('请求出错');
};

// 发送请求
xhr.send();

// 取消请求
setTimeout(() => {
  xhr.abort();
}, 1000);

总结

本文详细介绍了使用Axios、Fetch API和XMLHttpRequest三种方式实现请求取消的方法。在实际开发中，根据需求选择合适的方法，可以有效地处理请求取消的场景。

-- 展开阅读全文 --