面试题：如何通过自定义逻辑突破React错误边界在异步操作错误捕获上的局限性

使用Promise封装异步操作：

对于fetch请求，将其封装在一个Promise中，并在Promise的reject部分抛出错误。

function fetchWithErrorHandling(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
     .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
     .then(data => resolve(data))
     .catch(error => reject(error));
  });
}

在组件中使用封装后的函数：

在React组件中，使用async/await来调用封装后的fetchWithErrorHandling函数，并将其包裹在try/catch块中。

import React, { Component } from'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  async componentDidMount() {
    try {
      const result = await fetchWithErrorHandling('your - api - url');
      this.setState({ data: result });
    } catch (error) {
      // 这里可以通过上下文或者自定义事件等方式将错误传递给错误边界
      this.props.onError(error);
    }
  }

  render() {
    return (
      <div>
        {this.state.data && <p>{JSON.stringify(this.state.data)}</p>}
      </div>
    );
  }
}

自定义错误边界处理：

创建一个自定义的错误边界组件。

class CustomErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null
    };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      hasError: true,
      error: error
    });
    // 可以在这里进行错误日志记录等操作
    console.log('Error caught in boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>An error occurred: {this.state.error.message}</h1>
        </div>
      );
    }
    return this.props.children;
  }
}

使用自定义错误边界：

在应用中使用自定义错误边界包裹需要捕获异步错误的组件。

import React from'react';
import ReactDOM from'react - dom';
import CustomErrorBoundary from './CustomErrorBoundary';
import MyComponent from './MyComponent';

ReactDOM.render(
  <CustomErrorBoundary>
    <MyComponent onError={(error) => {
      // 这里将组件内部捕获的错误传递给错误边界
      throw error;
    }} />
  </CustomErrorBoundary>,
  document.getElementById('root')
);

通过上述步骤，先对异步操作进行Promise封装并处理错误，然后在组件内捕获错误并通过特定方式传递给自定义的错误边界组件，从而实现异步操作错误能被错误边界有效捕获和处理。

星途面试题库

面试题：如何通过自定义逻辑突破React错误边界在异步操作错误捕获上的局限性

知识考点

面试题答案