React 中使用 Antd Message 和 Axios 拦截器实现自动提示

要在 React 中使用 Antd 的 Message，并根据响应状态码弹出提示，可以通过 Axios 的拦截器来实现。下面是具体的步骤：

1. 首先，创建一个 Axios 的实例，并导入 Antd 的 Message 组件：

import axios from 'axios';
import { message } from 'antd';

const instance = axios.create({
  // 配置 Axios 实例
});

2. 接下来，使用 Axios 的拦截器，在请求发送前和响应返回后进行处理。在请求发送前，可以添加一些配置，例如设置请求头、loading 状态等。在响应返回后，可以根据响应状态码弹出提示信息：

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 添加一些配置，例如设置请求头、loading 状态等
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 根据响应状态码弹出提示信息
    if (response.status === 200) {
      message.success('请求成功');
    } else {
      message.error('请求失败');
    }
    return response;
  },
  (error) => {
    // 处理请求错误
    if (error.response) {
      // 根据响应状态码弹出提示信息
      if (error.response.status === 404) {
        message.error('请求资源不存在');
      } else {
        message.error('请求出错');
      }
    } else {
      message.error('网络错误');
    }
    return Promise.reject(error);
  }
);

3. 现在，你可以使用封装好的 Axios 实例发送请求，并根据响应状态码弹出相应的提示信息：

instance.get('/api/data')
  .then((response) => {
    // 请求成功
    console.log(response.data);
  })
  .catch((error) => {
    // 请求失败
    console.log(error);
  });

这样，你就可以在 React 中使用 Antd 的 Message 组件，并根据响应状态码弹出相应的提示信息了。

注意：

• 实际项目中，可以根据不同的状态码弹出更具体的提示信息，例如 401（未授权）、500（服务器错误）等。
• 可以根据实际需求，在拦截器中添加其他操作，例如处理 Token 过期、记录日志等。