如何通过then()将Fetch响应的JSON主体传入Throw Error()？

我完全懂你遇到的麻烦——用Fetch请求Laravel后端，碰到422验证错误时，直接拿响应对象根本看不到JSON数据，必须得先调用response.json()解析才行，而且你还在用SweetAlert来提示用户，对吧？我给你梳理下正确的处理方式：

首先要搞清楚Fetch的一个特性：哪怕后端返回422这种错误状态码，Fetch也不会直接跳进catch块，而是先进入then处理响应。所以我们得手动判断响应状态，再去解析JSON数据，具体代码示例如下：

fetch('/your-target-api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
  },
  body: JSON.stringify(yourRequestData)
})
.then(response => {
  // 先判断响应是否成功（状态码200-299）
  if (!response.ok) {
    // 解析422响应的JSON数据，然后抛给catch块处理
    return response.json().then(errorData => {
      throw errorData;
    });
  }
  return response.json();
})
.then(successData => {
  // 请求成功时的SweetAlert提示
  Swal.fire('搞定！', '操作执行成功', 'success');
})
.catch(error => {
  // 这里的error就是Laravel返回的解析后的验证错误数据
  // 比如结构是 {"message":"验证失败","errors":{"username":["用户名已存在"]}}
  let errorText = '';
  // 把所有错误信息拼接成友好的提示文本
  Object.values(error.errors).forEach(errList => {
    errorText += errList.join('\n');
  });
  // 用SweetAlert展示错误
  Swal.fire('出错啦！', errorText, 'error');
});

关键要点说明： #

• Fetch的响应对象本身是一个Response实例，它的响应体是可读流，必须通过json()、text()这类方法才能读取解析成我们能用的数据，这不是Laravel的问题，是Fetch API的设计逻辑
• 我们在!response.ok的分支里，先调用response.json()拿到Laravel返回的错误数据，再把它抛出去，这样后续的catch块就能直接拿到解析好的JSON对象，不用再重复解析
• 针对Laravel的验证错误结构，我们可以遍历errors对象里的所有错误信息，拼接成用户能看懂的提示，再用SweetAlert展示

这样处理之后，你就能正常获取到Laravel 422响应里的JSON数据，并且用SweetAlert正确提示用户啦。

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