React 中使用 Ant Design Message 和 Axios 封装的完整指南

要在 React 中使用 Ant Design 的 Message 和 Axios 的封装，可以按照以下步骤进行操作：

1. 安装依赖

首先，确保你已经安装了 Ant Design 和 Axios。可以使用以下命令进行安装：

npm install antd axios

2. 创建 Axios 封装文件

创建一个 Axios 封装文件，例如 api.js，在该文件中封装 Axios 的请求方法。可以使用以下代码作为示例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://your-api-url.com',
});

instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);

export default instance;

在上述代码中，我们创建了一个 Axios 实例，并设置了基本的 URL。还添加了一个响应拦截器，用于处理响应数据。

3. 在组件中使用 Axios

在需要使用 Axios 的地方，引入封装好的 Axios 实例，例如：

import api from './api';

// 在某个函数中使用 Axios 发送请求
const fetchData = async () => {
  try {
    const response = await api.get('/data');
    console.log(response);
    // 在这里可以根据返回的数据进行相应的处理
  } catch (error) {
    console.error(error);
  }
};

在上述代码中，我们通过引入 api.js 文件，使用封装好的 Axios 实例发送 GET 请求并处理响应数据。

4. 结合 Ant Design Message

现在，要在使用 Axios 的地方结合 Ant Design 的 Message 组件，可以在请求成功或失败时使用 Message 组件进行提示。例如：

import api from './api';
import { message } from 'antd';

// 在某个函数中使用 Axios 发送请求
const fetchData = async () => {
  try {
    const response = await api.get('/data');
    console.log(response);
    message.success('请求成功'); // 使用 Message 组件进行成功提示
    // 在这里可以根据返回的数据进行相应的处理
  } catch (error) {
    console.error(error);
    message.error('请求失败'); // 使用 Message 组件进行失败提示
  }
};

在上述代码中，我们在请求成功时使用 message.success() 进行成功提示，在请求失败时使用 message.error() 进行失败提示。

通过以上步骤，你就可以在 React 中同时使用 Ant Design 的 Message 和 Axios 的封装了。记得根据你的具体需求进行相应的修改。