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

Question

我有一个反应组件，我正在进行网络调用来设置状态。最终我想将其传递给其他子组件，但目前只是让管道工作。

我试图在调用我的后端（应用程序中的快速服务器）时正确捕获错误。我试图通过从不存在的端点获取数据来强制发生错误。这应该会抛出 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

我会努力一步一步走下去

1. fetch即使您收到 4xx 或 5xx 响应代码，该方法也不会引发错误。请仔细阅读本文Fetch API，相信您能发现很多您不知道的有趣内容。

2. 您可以轻松检查响应状态，如下所示（请阅读有关Response对象及其方法/属性的信息）：

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

3. 很难说你的服务器是否真的返回 404 代码，因为我不知道你的快速设置。如果您设置了一些后备处理程序，app.get('*', ...)那么它可能会返回 200 成功代码。您可以在浏览器的 devTools 中查看响应状态及其正文。但我相信，如果您至少将路由器配置为在未找到/api请求的路由时返回 404 错误，那就更好了。/api/...

4. 我真正确定的是您的服务器在响应中返回了一些 HTML 布局。你尝试将它解析为 JSON 字符串，data.json()当然你会得到语法错误，因为它不是 JSON（html 布局以<符号开头，因此出现错误SyntaxError: Unexpected token <：）