React的Hook让我们可以在函数组件中管理状态和副作用。在这篇文章中，我们将创建一个自定义的Hook，用来通过axios处理API请求。

自定义Hook：useApi
首先，让我们创建一个名为useApi的自定义Hook。这个Hook将有两个状态：data用于存储API的响应，error用于存储请求过程中发生的任何错误。接着，我们定义两个方法：get用于发送GET请求，post用于发送POST请求。每个方法都接受一个URL和一个可选的headers对象作为参数。

// useApi.js
// 堆代码 duidaima.com
import { useState } from 'react';
import axios from 'axios';

function useApi() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  
  const get = async (url, headers = {}) => {
    try {
      const res = await axios.get(url, { headers });
      setData(res.data);
      setError(null);
    } catch (err) {
      handleApiError(err);
    }
  };

  const post = async (url, body, headers = {}) => {
    try {
      const res = await axios.post(url, body, { headers });
      setData(res.data);
      setError(null);
    } catch (err) {
      handleApiError(err);
    }
  };

  const handleApiError = (err) => {
    setData(null);
    if (err.response) {
      setError(err.response.data);
    } else if (err.request) {
      setError('No response received');
    } else {
      setError(err.message);
    }
  };

  return { data, error, get, post };
}

export default useApi;

使用自定义Hook
现在我们有了自定义Hook，可以在组件中使用它。下面是一个示例：

// component.js

import useApi from './useApi';

function MyComponent() {
  const { data, error, get, post } = useApi();

  const fetchData = () => {
    get('https://api.example.com/api1', { 'Authorization': 'Bearer your_token' });
  };

  const postData = () => {
    post('https://api.example.com/api2', { key: 'value' }, { 'Authorization': 'Bearer your_token' });
  };

  if (error) return <div>Error: {error}</div>;
  return (
    <div>
      {/* 在这里渲染你的数据 */}
      {data && <div>{JSON.stringify(data)}</div>}
      <button onClick={fetchData}>获取数据</button>
      <button onClick={postData}>发送数据</button>
    </div>
  );
}

export default MyComponent;

处理多个数据参数
如果你需要处理多个数据参数，可以这样做：

// component.js for multiple data handling
import useApi from './useApi';

function MyComponent() {
  const { data: data1, error: error1, get: get1 } = useApi();
  const { data: data2, error: error2, post: post1 } = useApi();

  const fetchData1 = () => {
    get1('https://api.example.com/api1', { 'Authorization': 'Bearer your_token' });
  };

  const postData1 = () => {
    post1('https://api.example.com/api2', { key: 'value' }, { 'Authorization': 'Bearer your_token' });
  };

  if (error1) return <div>Error: {error1}</div>;
  if (error2) return <div>Error: {error2}</div>;

  return (
    <div>
      {/* 在这里渲染你的数据 */}
      {data1 && <div>{JSON.stringify(data1)}</div>}
      {data2 && <div>{JSON.stringify(data2)}</div>}
      <button onClick={fetchData1}>获取数据1</button>
      <button onClick={postData1}>发送数据1</button>
    </div>
  );
}

export default MyComponent;

在这个组件中，我们使用useApi Hook的get和post方法来发送GET和POST请求，并将数据状态作为JSON字符串渲染出来，如果error状态不为空，则显示错误信息。

这样一来，我们就创建了一个用于处理API请求的自定义Hook。这个Hook非常灵活，可以用于任何API请求，同时处理错误并允许你设置自定义的请求头。赶快试试吧，让你的React开发更加高效！

结束
通过这种方式，我们不仅提高了代码的复用性，还使API请求的处理更加简洁和优雅。如果有任何问题或建议，欢迎在评论区留言，我们一起讨论学习！