React使用axios请求GitHub用户接口报404及Promise未捕获错误如何解决

错误根因 #

你当前的报错是因为JS字符串插值语法使用错误：

• 你用普通双引号"包裹请求URL，JS不会解析内部的${user}占位符，变量不会被替换成实际的用户输入值
• 这就导致你实际请求的地址是https://api.github.com/users/${user}，编码后变成报错里的https://api.github.com/users/$%7Buser%7D，该路径不存在，所以返回404状态码

修复方案 #

有两种常用的修复方式，二选一即可：

方式1：使用ES6模板字符串（推荐） #

将URL包裹的双引号替换为反引号`，模板字符串会自动解析内部的${}占位符：

axios.get(`https://api.github.com/users/${user}`)

方式2：使用字符串拼接 #

如果不方便用模板字符串，也可以手动拼接变量和固定URL：

axios.get("https://api.github.com/users/" + user)

优化建议 #

建议补充错误捕获逻辑和输入校验，避免未捕获的Promise报错，修正后完整代码参考：

function App() {
  let getUser = (e) =>{
    e.preventDefault()
    const user = e.target.elements.username.value?.trim()
    // 先校验输入非空
    if(!user) {
      alert('请输入用户名')
      return
    }
    axios.get(`https://api.github.com/users/${user}`)
    .then((res) => {
      console.log(res)
    })
    // 补充catch捕获请求错误
    .catch(err => {
      console.error('请求失败：', err)
      alert('查询用户失败，请检查输入是否正确')
    })
  }
  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">HTTP&API</h1>
      </header>
      <UserForm getUser={getUser}/>
    </div>
  );
}

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