用react-hooks 帮我实现对axios的二次封装

以下是使用React Hooks对Axios进行二次封装的示例代码：

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

const useAxios = (url, method, body = null, headers = null) => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios({
      method: method,      url: url,
      data: body,
      headers: headers
    })
      .then(res => {
        setResponse(res.data);
      })
      .catch(err => {
        setError(err);
      });
  }, [url, method, body, headers]);

  return { response, error };
};

export default useAxios;

在这个示例中，我们使用了useState和useEffect两个React Hooks。useState用于在组件中存储状态，而useEffect用于在组件渲染时执行副作用操作。我们将Axios请求封装在useAxios自定义钩子中，并将url，method，body和headers作为参数传递。在useEffect中，我们使用Axios发送请求，并根据响应设置状态。最后，我们返回一个包含响应和错误的对象。

使用示例：

import useAxios from './useAxios';

const MyComponent = () => {
  const { response, error } = useAxios('https://jsonplaceholder.typicode.com/posts', 'get');

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

  return (
    <ul>
      {response.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

在这个示例中，我们使用useAxios钩子从https://jsonplaceholder.typicode.com/posts获取帖子列表。我们根据响应渲染帖子列表，如果出现错误，则显示错误消息，如果响应尚未返回，则显示加载消息。