Axios.get未返回任何数据，调用API无法获取正确信息问题排查

问题原因&修复方案 #

• 你定义的res请求函数从未被主动调用，请求逻辑根本没有触发
• axios.get返回的是异步Promise对象，你没有通过.then()/await处理返回结果，也没有添加.catch()捕获可能的请求错误，自然拿不到返回数据也看不到报错
• 这是React函数组件的写法，如果你要在组件加载时触发请求，需要配合useEffect钩子执行，拿到数据后存入useState才能正常使用或渲染

修正后的可运行代码示例 #

import { useState, useEffect } from 'react'
import axios from 'axios'

const App = () => {
  // 存储接口返回的圣经列表数据
  const [biblesList, setBiblesList] = useState([])
  // 存储请求错误信息
  const [requestError, setRequestError] = useState(null)

  const fetchBiblesData = async () => {
    try {
      const res = await axios.get('https://api.scripture.api.bible/v1/bibles', {
        headers: {
          'api-key': '5b5d4503884b7a2515e8cee8f4b00746',
        },
      })
      setBiblesList(res.data)
      // 可在控制台查看返回的完整数据结构
      console.log('接口返回数据：', res.data)
    } catch (err) {
      setRequestError(err)
      console.error('请求异常：', err)
    }
  }

  // 组件首次挂载时触发请求
  useEffect(() => {
    fetchBiblesData()
  }, [])

  // 渲染示例
  return (
    <div>
      {requestError && <p>请求失败：{requestError.message}</p>}
      {biblesList.length > 0 && (
        <ul>
          {biblesList.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      )}
    </div>
  )
}

如果修改后仍然无法获取数据，可以打开浏览器开发者工具的「网络」面板，查看该请求的响应状态和返回内容，排查是否存在跨域、API密钥无效、接口参数错误等问题。

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