如何使用 axios 获取本地数据？答案

【问题标题】：How fetch local data with axios?如何使用 axios 获取本地数据？
【发布时间】：2020-07-07 22:54:58
【问题描述】：

我想要我的 JSON 文件 (crew.json) 中的数据，但我无法接收：

const [apiNews, setApiNews] = useState([]);
useEffect(() => {
const fetchData = async () => {
  
    const apiNews = await axios.create({baseURL:
      `http://localhost:3000/`, headers: {
        "Content-type": "application/json"
      }}) 
      apiNews.get('../../micro-components/Api/crew.json')
 
    setApiNews(apiNews.data);
 
  console.log("APIHEADER", apiNews.data)
       
}
fetchData(apiNews);
  }, [])

你知道为什么吗？ ...我有一个 404 但 '../../micro-components/Api/crew.json' 是正确的方法...

【问题讨论】：

如果它是一个本地文件，并且假设你使用类似create-react-app的东西，那么你可以在文件顶部做一个import声明，不需要fetch任何东西.
当然可以，但我需要使用 axios，因为之后，它将在 API 服务器上......
然后你应该运行一个 API 服务器，或者在开发过程中用你的开发服务器提供那个文件。该路径基本上会说“从我的应用程序加载的位置向上 2 个目录，然后查找 micro-components/Api/crew.json”。如果您的应用程序在开发中由localhost:3000 提供服务，那么它基本上会向您的开发服务器询问localhost:3000/micro-components/Api/crew.json。
你的baseURL (http://localhost:3000) 和你的path (.../.../micro-components/Api/crew.json) 会产生一个不正确的URL，所以你需要弄清楚什么时候合适的URL文件正在从您的开发服务器提供。否则，只需使用 json-server 之类的东西来启动一个快速的 API 服务器并以这种方式提供您的数据 - github.com/typicode/json-server
另外，您不应该为axios.create 使用awaiting，而是将await 移动到apiNews.get 旁边。

标签： reactjs axios react-hooks

【解决方案1】：

如果 src 代码中有某些东西，你应该像这样导入它

import data from '../../micro-components/Api.crew.json';

在那种情况下，你会避免这整件事。

如果你真的想从 src 目录中获取数据，你不能这样做，但你可以像这样查询公共目录

假设 cramp.json 位于 /my-app/public/crew.json

const [apiNews, setApiNews] = useState([]);
useEffect(() => {
    const fetchData = async () => {
        const {data} = await axios.get('crew.json');
        setApiNews(data);
    }
    fetchData();
}, []);

我也会说这样做，因为这意味着您不必这样做

【讨论】：

我的数据文件位于 src/micro-components/Api/crew.json。但它的风格不起作用。我在公用文件夹中尝试，但这也不起作用......总是有 404 错误
“它的风格不起作用”是什么意思？你在使用 Create React App 吗？