27.useFetch

在 React 应用开发中，处理网络请求是一个常见而重要的任务。虽然 JavaScript 的 fetch API 提供了一种现代化的方式来进行网络请求，但在 React 组件中使用它可能会变得复杂。useFetch 钩子提供了一种声明式的方法来处理网络请求，简化了错误处理、加载状态管理和请求取消等复杂操作。以下是如何实现和使用这个自定义钩子：

const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [abort, setAbort] = React.useState(() => {});

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const abortController = new AbortController();
        const signal = abortController.signal;
        setAbort(abortController.abort);
        const res = await fetch(url, {...options, signal});
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
    return () => {
      abort();
    }
  }, []);

  return { response, error, abort };
};

const ImageFetch = props => {
  const res = useFetch('https://dog.ceo/api/breeds/image/random', {});
  if (!res.response) {
    return <div>Loading...</div>;
  }
  const imageUrl = res.response.message;
  return (
    <div>
      <img src={imageUrl} alt="avatar" width={400} height="auto" />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <ImageFetch />
);

这个技巧的关键点包括：

1. 使用 useState 来管理响应、错误和中止函数的状态。

2. 使用 useEffect 来执行异步的 fetch 操作。

3. 使用 AbortController 来实现请求的取消功能。

4. 返回包含响应、错误和中止函数的对象，方便在组件中使用。

使用这个钩子时，需要注意以下几点：

1. 钩子返回一个对象，包含 response、error 和 abort 三个属性。

2. 在组件卸载时，会自动取消未完成的请求。