如何获取获取错误以显示 http 状态代码？答案

【问题标题】：How can I get my fetch error to show an http status code?如何获取获取错误以显示 http 状态代码？
【发布时间】：2019-08-22 04:01:55
【问题描述】：

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

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

【问题讨论】：

查看wretch 文档。它是fetch() 的包装库，既能回答您的问题，也可能您有兴趣使用它来处理错误。除非您检查状态，否则 404 不会转到 fetch() 捕获（在返回 data.json() 并抛出您自己的错误之前）
您是在尝试打印错误状态代码/消息还是什么？
@charlietfl 好的。检查这样的状态并打印错误是否相当标准？这是我打网络电话的地方，不是吗？最终，此代码将从组件中移出并移至某些特定于服务器通信的文件中。
@wentjun 是的，这就是我想要做的。
是的......您需要在使用fetch() 时创建自己的样板错误处理。我更愿意让图书馆为我做这件事。也使发布数据更简单

标签： javascript reactjs http express fetch

【解决方案1】：

我会一步一步来的

fetch 方法不会抛出错误，即使您获得 4xx 或 5xx 响应代码。请仔细阅读Fetch APIFetch 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 <）

【讨论】：

非常详细的答案

【解决方案2】：

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

我建议您根据 Response.Ok 属性检查您的 http 响应正文。成功的响应将在该条件下处理，而任何其他响应（ok: false）将在其他语句上处理。

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(
    // ...

【讨论】：