为何以下错误未被catch代码块捕获？

相关代码 #

peopleService.create(personObject).then((returnedPerson) => {
  setPersons(persons.concat(returnedPerson));
  setMessage(`Added ${personObject.name}`);
  setNewName(" ");
  setPhone(" ");
  setTimeout(() => {
    setMessage(null);
  }, 3000);
}).catch(error =>{
 console.log(`${error.response.data.error}`)      
})

问题说明 #

当输入姓名长度不足3个字符时，后端会抛出错误，但该错误并未被上述代码中的catch代码块捕获，请问原因是什么？

原因分析及解决方案 #

核心原因大概率是peopleService.create的实现没有正确处理后端返回的HTTP错误状态码：

• 如果使用fetch API发送请求，它只会在网络层面出错（比如请求无法发送、连接中断）时才会触发Promise的reject；对于后端返回的400、404这类HTTP错误状态码，fetch会将其视为“成功的请求”，直接进入then回调，而不会触发catch。
• 要让这类HTTP错误进入catch，需要在peopleService.create中手动判断响应状态，将错误转为rejected Promise：

示例修正后的create方法：

const create = (personObject) => {
  const baseUrl = '你的接口地址';
  return fetch(baseUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(personObject)
  })
  .then(response => {
    if (!response.ok) {
      // 解析后端返回的错误信息并抛出
      return response.json().then(errData => {
        throw new Error(errData.error);
      });
    }
    return response.json();
  });
};

如果你的peopleService.create是基于Axios实现的，那Axios默认会把4xx/5xx状态码转为rejected Promise，此时需要检查：

1. 请求是否真的到达了后端并返回了错误
2. Axios的配置是否被修改过（比如取消了对HTTP错误的reject）

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