React应用中API Fetch请求失败问题求助

问题分析 #

• 未处理HTTP错误状态：Fetch API仅在网络层面故障时抛出异常，像400、404这类HTTP错误状态码不会自动触发reject，必须手动检查response.ok属性判断请求是否成功。
• 缺少错误捕获逻辑：原代码的异步函数没有try/catch包裹，请求失败时无法获取具体错误信息，难以排查问题。
• 空输入未校验：如果用户没输入内容就点击按钮，请求URL会是https://api.nationalize.it?name=，大概率导致API返回错误。

修复后的代码 #

import { useState, useRef, useEffect } from "react"

function App() {
  const [userName, setUserName] = useState("");
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, [])

  const handleSubmit = async () => {
    // 先校验输入是否为空
    if (!userName.trim()) {
      console.log("请输入姓名后再提交");
      return;
    }

    try {
      const response = await fetch(`https://api.nationalize.it?name=${userName}`);
      
      // 检查HTTP响应是否正常
      if (!response.ok) {
        throw new Error(`请求失败：${response.status} ${response.statusText}`);
      }

      const result = await response.json();
      console.log(result);
    } catch (error) {
      // 捕获所有错误并打印，方便排查
      console.error("请求出错：", error);
    }
  }

  return (
    <div className="App">
      <input ref={inputRef} value={userName} onChange={(e) => setUserName(e.target.value)} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

export default App;

关键修复点 #

• 把按钮点击的内联异步函数提取为独立的handleSubmit函数，代码更清晰易维护。
• 增加输入空值校验，避免无效请求。
• 用try/catch包裹请求全流程，捕获网络故障、HTTP错误、JSON解析失败等所有可能的异常。
• 通过response.ok判断HTTP状态，将错误状态转为可捕获的异常，便于定位问题。

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