前端技巧第八期JavaScript中断网络请求

一、中断网络请求的原因

场景

1：用户取消了操作，此时不需要继续等待请求的响应。

2：页面进行了跳转，原来的请求已经不再需要。

1：网络请求超时，需要重试或取消。

如果不中断请求导致

1：浪费网络资源和服务器资源。

1：可能导致页面卡顿或性能下降。

1：用户体验不佳，如页面跳转后仍在等待旧请求的响应。

二、如何中断网络请求

1：XMLHttpRequest

对于XMLHttpRequest对象，我们可以使用abort()方法来中断请求

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      // 处理响应数据
    } else {
      // 处理错误
    }
  }
};

// 假设在某个时刻，我们需要中断请求
xhr.abort(); // 调用abort方法中断请求

2：Fetch API

对于Fetch API，由于其返回的是一个Promise对象，我们无法直接调用类似于abort()的方法来中断请求。但我们可以使用一些技巧来实现类似的功能

一种常用的方法是使用AbortController和AbortSignal。AbortController提供了一个signal属性，该属性是一个AbortSignal对象。我们可以将signal对象作为参数传递给fetch请求的options对象。当需要中断请求时，我们可以调用AbortController的abort()方法

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

fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 处理响应数据
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 请求被中断
    } else {
      // 处理其他错误
    }
  });

// 假设在某个时刻，我们需要中断请求
controller.abort(); // 调用abort方法中断请求

3：axios

在使用axios进行网络请求时，中断请求的需求同样存在。axios提供了几种方法来优雅地中断正在进行的网络请求

1：使用CancelToken （v0.22.0之前）

//创建一个取消源
 const CancelToken = axios.CancelToken;
 const source = CancelToken.source();
 //发送请求时传入取消令牌
  axios.get('/user/12345', {
   cancelToken: source.token
 }).catch(function (thrown) {
   if (axios.isCancel(thrown)) {
     console.log('请求被取消:', thrown.message);
   } else {
     // 处理错误
   }
 });
 // 当需要取消请求时，调用source.cancel()
  source.cancel('用户取消了请求');

2：使用构造函数形式

 const CancelToken = axios.CancelToken;
 let cancel;
 axios.get('/user/12345', {
   cancelToken: new CancelToken(function executor(c) {
     // 取消函数作为参数传入
     cancel = c;
   })
 });
 // 当需要取消请求时，直接调用cancel()：
 cancel();

3：AbortController

// 创建一个AbortController实例
const controller = new AbortController();
// signal
 axios.get('/user/12345', {
   signal: controller.signal
 }).then(function (response) {
   // 处理响应
 }).catch(function (error) {
   if (error.name === 'AbortError') {
     console.log('请求被中止');
   } else {
     // 处理其他错误
   }
 });
 // 当需要取消请求时，调用controller.abort()
  controller.abort();