# 16 React 使用自定义Hook实现网络请求

自定义Hook可以帮助你在React应用中重用一些逻辑。以下是如何使用自定义Hook实现网络请求：

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

const useApi = (url) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get(url);
        setData(response.data);
      } catch (error) {
        setError(error);
      }
      setLoading(false);
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useApi;

在这个自定义Hook中，我们命名为useApi。它接受一个URL作为参数，并返回包含数据、加载状态和错误的对象。

使用这个自定义Hook非常简单。只需在你的组件中调用它，并传递API的URL作为参数即可：

import React from 'react';
import useApi from './useApi'; // 导入自定义Hook

const MyComponent = () => {
  const { data, loading, error } = useApi('http://localhost:3001/data');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Data from API:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

在这个示例中，我们导入了之前定义的useApi自定义Hook，并在组件中调用它，传递了API的URL。根据加载状态和错误状态，我们渲染不同的内容。

使用自定义Hook能够将重复的逻辑封装起来，使得组件更加简洁和可维护。