Как вызвать React границы ошибок при отклонении обещаний? - PullRequest
Новая
       36

Как вызвать React границы ошибок при отклонении обещаний?

0 голосов
/ 04 октября 2019

Проблема, с которой я столкнулся, заключается в том, что ошибки, возникающие в обещаниях, не фиксируются в граничном компоненте ошибок.

Код выбирает данные с сервера и использует код состояния, чтобы определить, что делать с данными изответ. 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?

...