如何在全局错误处理函数中使用Message?

[shezhangzhang]

问题

有一种常见的需求是在全局请求函数封装中，对服务端错误进行统一的处理。这里可能是一个JS/TS文件。文档推荐的方法是在<App></App>里面顶层注册它。在这种纯TS文件中如何使用呢？在这里，使用 message.error() 会出现告警提示，比较难看。

代码

// fetch.ts
axios.interceptors.response.use(
  function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    return response;
  },
  function (error: AxiosError) {
    if (error.response) {
      if (error.response.status === 401) {
        void message.error('user not login');
      } else {
        void message.error('error occur');
      }
    }
    return Promise.reject(error);
  },
);

报错信息如下：

fetcher.ts:56 Warning: [antd: message] Static function can not consume context like dynamic theme. Please use 'App' component instead.

弹窗还是弹出来了的，确实读不到theme的context，它没有正常的dark mode。

总结

1. 这种使用方式是能渲染出来message的，可以不报错吗？开发者报错看着难受住了。
2. 确实没有办法读到当前theme的信息是吗？

[crazyair]

https://ant-design.antgroup.com/components/app-cn#%E5%85%A8%E5%B1%80%E5%9C%BA%E6%99%AFredux-%E5%9C%BA%E6%99%AF

[shezhangzhang]

@crazyair 好像没懂，这里写的是Redux场景，我的场景没有Redux，是在纯TS文件中使用message，这个例子中entry component从哪里注册？（axios fetcher初始化的时候怎么拿到这个message）