如何使用Fetch API捕获服务器返回的特定错误信息？

我明白你的困扰——Axios会自动把HTTP错误（比如400、401这类非200状态）抛进catch，但Fetch API不一样，它只有网络层面的错误才会触发catch，HTTP状态码错误会正常进入then分支。所以你需要在else里手动解析服务器返回的错误JSON，再把它传递到catch里统一处理。

具体修改步骤： #

• 在else分支中，先调用res.json()解析服务器返回的错误响应体（你的服务器返回的是{ msg: "错误信息" }格式的JSON）
• 解析后抛出一个包含错误信息的自定义Error，这样后续的catch就能捕获到这个错误

修改后的完整代码： #

fetch("http://localhost:4000/snackhub/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    email: user.email,
    password: user.password,
  }),
})
.then((res) => {
  if (res.status === 200) {
    return res.json();
  } else {
    // 解析错误响应并抛出自定义错误
    return res.json().then(errData => {
      throw new Error(errData.msg);
    });
  }
})
.then((data) => {
  console.log(data);
  localStorage.setItem("auth-token", data.token);
  dispatch(fetchUsers());
  setUser({ email: "", password: "" });
  history.push("/");
})
.catch((err) => {
  // 这里就能拿到服务器返回的错误信息了
  console.log(err.message);
});

补充说明： #

• Fetch的res.json()是异步操作，返回Promise，所以需要用.then()来获取解析后的错误数据
• 通过抛出Error，我们可以把HTTP错误统一交给catch分支处理，和网络错误的处理逻辑保持一致
• 如果你的服务器可能返回不同格式的错误，也可以在解析后做判断，比如检查errData.msg是否存在，再决定怎么处理

内容的提问来源于stack exchange，提问作者UberSelf