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

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

我会努力一步一步走

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

2. 您可以轻松检查响应状态，如下所示(请阅读 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 < )