Question

我有一个react组件，并且正在拨打网络电话以设置状态。最终，我想将其传递给其他子组件，但现在只能使管道正常工作。

我正在调出后端（应用程序中的快递服务器）时正确捕获错误。我试图通过从不存在的端点获取数据来强制执行错误。因为它不存在，所以应该抛出404，对吧？如何在catch语句中发现该错误？现在我的错误是SyntaxError: Unexpected token < in JSON at position 0 at eval (app.js:61)

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() { 
    fetch('/api/wrong_endpoint').then((data) => {
      return data.json();
    }).then((body) => {
      this.setState({data: body})
    }).catch(err => console.log(err));

  }

  render() {
    console.log('logging the states');
    console.log(this.state.data);
    return (
      <div>
        <ContactList />
        <ContactDetail />
        <AddContactModal />
      </div>
    );
  }
}

Answer 1

我会尝试逐步进行

fetch方法即使抛出4xx或5xx响应代码也不会引发错误。请仔细阅读Fetch API，我相信您会发现很多您不了解的有趣内容。
您可以轻松地检查响应状态，如下所示（请阅读Response对象及其方法/属性）：

fetch('/api/wrong_endpoint').then((response) => {
    console.log('status code', response.status)
})

很难说您的服务器是否真的返回404代码，因为我不知道您的明确设置。如果您设置诸如app.get('*', ...)之类的后备处理程序，则它最好返回200个成功代码。您可以在浏览器的devTools中检查响应状态及其主体。但是，我认为最好是如果未找到请求的/api路由，则至少将/api/...路由器配置为返回404错误。
我真正确定的是您的服务器在响应中返回了一些HTML布局。并且您尝试通过data.json()将其解析为JSON字符串，并且由于语法不是JSON，因此当然会出现语法错误（html布局以<符号开头，因此错误为：SyntaxError: Unexpected token <）

Answer 2

通常，如果您使用的是提取API，则错误40x和50x不会进入后续块，因为提取的承诺只会拒绝网络错误（而不是HTTP错误或其他错误）。因此，从“不正确”端点请求数据将在第一个then块内处理。

我建议您使用基于Response.Ok属性的http响应正文。成功的响应将在该条件下处理，而其他任何响应（可以：假）将在另一条语句上处理。

fetch('/api/wrong_endpoint')
  .then(response => {
    console.log(response) // full response body
    console.log(response.status); // get only the response.status
    if (!response.ok) {
      // http errors 40x and 50x will go into this statement
      // do something to handle it
    } else if (response.ok) {
      // handles status code 200
    }
  })
  .then(
    // ...

如何获取我的提取错误以显示http状态代码？

2 个答案: