React中fetch请求API返回Promise，async/await阻塞无响应结果

核心问题点 #

• 未阻止表单默认提交行为：form元素绑定onSubmit事件后没有调用preventDefault()，点击提交按钮时浏览器会触发默认的表单提交逻辑，直接刷新页面，异步请求还没等返回执行上下文就被销毁，表现为代码卡在await位置、控制台无输出。
• 缺少请求错误捕获逻辑：现有fetch封装没有处理HTTP错误、跨域错误、JSON解析失败的场景，一旦请求异常，Promise状态变为reject但没有被捕获，代码会直接中断。
• 冗余无效事件绑定：提交按钮上绑定的onSubmit事件不会触发（onSubmit是表单元素的事件，按钮本身不触发该事件），属于无效代码。
• 跨域配置缺失概率高：前端服务和后端接口（localhost:1323）端口不一致，若后端未配置CORS允许规则，浏览器会直接拦截请求，导致fetch抛出跨域异常。

补充：移除async/await后返回Promise对象是异步函数的正常表现，所有async声明的函数返回值都是Promise实例，必须通过await或者.then()才能拿到最终结果，这不是bug。

修复步骤 #

1. 修改表单提交方法，第一时间阻止默认行为，加上错误捕获：

   async function validateLogin(e) {
     // 阻止表单默认提交刷新页面
     e.preventDefault();
     if (password !== "" && email !== "") {
       try {
         const response = await validLoginFetch(email, password)
         console.log('接口响应结果：', response)
         // 后续业务逻辑（比如登录成功跳转、状态更新）写在这里
       } catch (err) {
         console.error('请求异常：', err)
       }
     }
   };
   

2. 优化请求封装方法，增加HTTP状态校验和返回格式校验，避免解析报错：

   export async function validLoginFetch(email,password){
     const data = JSON.stringify({ email, password });
     const headers = {
       'Content-Type': 'application/json',
     };
     const options = {
       method: 'POST',
       body:data,
       headers:headers,
     }
     const response = await fetch('http://localhost:1323/profile/valid', options);
     // 校验HTTP状态，非2xx状态直接抛错
     if (!response.ok) {
       throw new Error(`接口请求失败，状态码：${response.status}`)
     }
     // 校验返回格式，确认是JSON再做解析
     const contentType = response.headers.get('content-type');
     if (contentType?.includes('application/json')) {
       return response.json()
     }
     // 非JSON格式返回文本内容方便排查
     return response.text()
   }
   

3. 删除按钮上冗余的无效onSubmit绑定，明确按钮类型为提交：

   <button
     type="submit"
     id="authenticate-user-login"
     className="authenticate-user-login"
   >
     Login
   </button>
   

排查方向 #

• 打开浏览器开发者工具的Network面板，点击登录按钮后观察请求记录：
  • 若请求状态显示为CORS error，直接去后端配置跨域规则，将前端运行的源地址加入CORS允许列表即可。
  • 若请求正常发送到后端，观察响应状态码和响应内容：如果返回内容不是标准JSON格式，之前直接调用response.json()会触发解析错误，导致代码中断。
  • 若请求正常返回200且响应格式正确，基本就是未阻止默认提交导致的页面刷新打断了代码执行。
• 所有异步请求逻辑必须配套错误捕获，否则未处理的Promise异常会直接中断后续代码执行，也不会输出预期的调试日志。

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