React Native使用Axios发POST请求遇未处理Promise拒绝问题排查

问题分析与修复方案 #

你的代码存在几个关键问题，直接导致了未处理的Promise拒绝和请求失败：

1. 语法错误：if代码块未正确闭合 #

你在if (isEmailValid)的逻辑块中，写完Axios请求后缺少了闭合的}，直接跳到了else分支。这会让JavaScript解析代码时出错，整个login函数的逻辑无法正常执行，进而触发未处理的Promise拒绝。

修复代码：
在Axios的.catch()语句后补上缺失的闭合大括号：

if (isEmailValid) {
  const user = { email: email, password: email } 
  axios.post(`http://localhost:3002/api/user/login`, { user }) 
    .then(response => { 
      console.log(response) 
      console.log(response.data) 
    }) 
    .catch(error => console.log(error))
} // 补上这个缺失的闭合大括号
else { 
  alert("Email invalid") 
}

2. 请求体数据错误：password字段赋值错误 #

你创建请求体的user对象时，错误地将password的值设置为email变量，这会导致发送给后端的密码是用户输入的邮箱内容，和实际输入的密码完全不符。后端验证失败后会返回错误，而因为前面的语法错误，你的错误捕获逻辑也无法正常工作。

修复代码：
把password的值改为正确的password变量（也可以用ES6对象简写语法简化代码）：

// 方式1：完整写法
const user = { email: email, password: password }
// 方式2：ES6对象简写（更简洁）
const user = { email, password }

3. 额外注意：React Native访问localhost的兼容性问题 #

如果你在模拟器或真机上运行代码，localhost指向的是设备本身，而不是运行Node.js后端的电脑。这时候你需要把http://localhost:3002替换成电脑的局域网IP地址（比如http://192.168.1.105:3002，具体IP可以通过ipconfig（Windows）或ifconfig（Mac/Linux）查看），否则请求会因无法连接后端而失败。

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