正文

React组件生命周期中如何优雅地取消fetch请求？

/0 浏览量
0517

在React组件的生命周期中，进行异步操作如fetch请求时，我们可能会遇到组件已经卸载，但请求还未完成的情况。这种情况下，请求会继续执行，可能导致内存泄漏或者返回无效的数据。因此，优雅地取消fetch请求对于避免这些问题至关重要。

以下是几种在React组件生命周期中取消fetch请求的方法：

1. 使用AbortController

AbortController是现代浏览器提供的一个API，可以用来取消fetch请求。结合React的生命周期方法，我们可以这样使用：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data', { signal });
        const data = await response.json();
        console.log(data);
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      }
    };

    fetchData();

    // 组件卸载时取消请求
    return () => {
      controller.abort();
    };
  }, []);

  return <div>My Component</div>;
}

2. 使用fetch的cancel方法

在一些旧版浏览器中，fetch API没有直接提供取消请求的方法。这时，我们可以通过XMLHttpRequest来间接实现取消：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          console.log(data);
        } else {
          console.error('Fetch error:', xhr.statusText);
        }
      }
    };
    xhr.onabort = function () {
      console.log('Fetch aborted');
    };
    xhr.send();

    // 组件卸载时取消请求
    return () => {
      xhr.abort();
    };
  }, []);

  return <div>My Component</div>;
}

3. 使用axios库

如果你使用axios进行HTTP请求，它提供了更方便的取消机制：

import React, { useEffect } from 'react';
import axios from 'axios';

function MyComponent() {
  useEffect(() => {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();

    axios.get('https://api.example.com/data', {
      cancelToken: source.token
    }).then(response => {
      console.log(response.data);
    }).catch(error => {
      if (axios.isCancel(error)) {
        console.log('Fetch aborted');
      } else {
        console.error('Fetch error:', error);
      }
    });

    // 组件卸载时取消请求
    return () => {
      source.cancel('Component unmounted, fetch aborted');
    };
  }, []);

  return <div>My Component</div>;
}

在上述方法中，我们通过组件卸载时返回一个清理函数来取消fetch请求。这样，即使用户离开了当前页面，未完成的请求也会被优雅地取消，从而避免了潜在的资源浪费和错误。

-- 展开阅读全文 --