终止React Hooks中的未决API请求：一种拯救应用程序的方法

2023-10-02 08:02:34

正文

在现代Web开发中，React Hooks凭借其简洁易懂的语法和强大的功能成为构建UI界面的利器，尤其是在处理异步操作时，它能够帮助我们轻松获取和处理数据。然而，在某些情况下，例如用户取消操作或组件卸载时，API请求可能仍然在进行中，造成资源浪费和不必要的延迟。

为了解决这个问题，我们需要一种方法来终止未决的API请求，AbortController和AbortSignal应运而生。AbortController是一个用于终止HTTP请求的API，AbortSignal是一个对象，可以通知HTTP请求被中止。

要使用AbortController和AbortSignal，首先需要在组件中创建一个AbortController实例，然后将AbortController.signal属性传递给fetch()方法的signal选项，这样就可以在需要时调用AbortController.abort()方法来终止请求。

import { useEffect, useState, useRef } from "react";

const useFetch = (url, options) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const abortController = useRef(new AbortController());

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      try {
        const response = await fetch(url, {
          ...options,
          signal: abortController.current.signal
        });

        if (response.ok) {
          const data = await response.json();
          setData(data);
        } else {
          setError(response.statusText);
        }
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.current.abort();
    };
  }, [url, options]);

  return { data, error, loading };
};