Question

我在react app中有以下代码（顶级文件-只是为了显示问题，我知道它不是进行api调用和检索数据的正确位置）：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

async function run() {
    try {
        return await fetch("https://somenonexistingplace.com"); 
    } catch (e) {
        console.error(e);
    } 
}

run();

ReactDOM.render(<App />, document.getElementById('root'));

当我运行此代码时，catch显然会缓存异常，但会说“ e未定义”-因此我无法访问通常位于e中的错误消息。 See screenshot from debug session

当我在React应用程序外部以附加到html的普通脚本运行这样的代码时，everything works fine和e是带有正确错误消息的对象。

唯一的区别是，第一个示例位于React应用程序中，第二个示例位于React外部。

所以我的问题是：这里会发生什么以及如何解决？

编辑：我知道我可以用promises和.catch（...）代替它，但这不是重点-我对为什么try / catch在这里不能按预期工作的原因感兴趣。

Answer 1

我建议将语法从try / catch更改为fetch（）。catch（）

return await fetch("https://somenonexistingplace.com").catch(e => console.error(e))

Answer 2

try / catch很不错，但仅适用于命令性代码。

从docs，

错误边界保留了React的声明性，并表现出预期的效果。例如，即使因setState在树深处引起的componentDidUpdate方法中发生错误，它仍将正确传播到最近的错误边界。

只是一个例子，

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

用法

<ErrorBoundary>
  <YourComponent />
</ErrorBoundary>

Answer 3

尝试->

URL='http://<--some wrong url -->'

async function run() {
        const resp= await fetch(URL);
        console.log(resp)

}

如果出现任何错误，则应自行回应。

Answer 4

这在使用axios从URL获取响应时在节点上对我有用：

const axios = require("axios");

async function run() {
    try {
        return await axios.get("https://somenonexistingplace.com"); 
    } catch (e) {
        console.error(e);
    } 
}

解决了使用https模块时await无法正常工作的相同问题。

在ReactJs中从异步代码捕获异常的问题

4 个答案: