Promises 被拒绝时如何触发 React 错误边界？

Question

我遇到的问题是承诺中抛出的错误没有被错误边界组件捕获。

该代码从服务器获取数据并使用状态代码来确定如何处理来自响应的数据。axios用作客户端并设置拦截器来处理响应。

API.interceptors.response.use((response) => {
  switch (response.status) {
    case 500:
    case 403:
      throw new Promise((resolve) => resolve(response.status));
  }
});

我设置了一个ErrorBoundary组件来捕获在其子组件中抛出的错误：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  componentDidCatch(error) {
    this.setState({
      hasError: true,
    });

    if (error instanceof Promise) {
      error.then(() => console.log(error));
    } else {
      console.log(error);
    }
  }

  render() {
    return this.state.hasError ? (
      <span>Something went wrong but it is okay</span>
    ) : (
      this.props.children
    );
  }
}

它被用作：

<ErrorBoundary>
  <Child />
</ErrorBoundary>

该Child组件在componentDidMount方法中从服务器获取一些数据。

componentDidMount() {
  API.getData().then((data) => {
    ...
  });
}

当服务器以导致Promise抛出的状态代码响应时，ErrorBoundary组件应该捕获它，但它没有。如果在componentDidMount方法内部显式抛出错误，则错误边界会相应地做出反应。例如：

componentDidMount() {
  throw new Error(); 
  // or throw new Promise(resolve => resolve());
}

错误总是可以被捕获，catch但是有没有办法让ErrorBoundary组件捕获这些错误？