使用axios获取数据是否仅支持JSON格式，能否直接获取JS文件导出数据？

核心问题解答 #

axios 是通用的HTTP请求客户端，不限制请求的资源类型，不存在「只能获取JSON格式数据」的限制。但它默认只会对Content-Type为application/json的响应内容做自动解析，直接转为可操作的JS对象；如果你请求的是.js格式的文件，默认拿到的是纯字符串格式的JS代码，无法直接操作，需要额外做语法解析处理。

你当前的写法存在两个问题：

1. axios.get返回的是完整的响应对象，需要取.data属性才能拿到响应体内容
2. 请求.js文件拿到的是纯文本代码，不是你预期的导出对象，直接赋值后无法调用map方法遍历

推荐解决方案 #

方案1：改用JSON文件存储数据（最优选择）

静态结构化数据优先用JSON格式存储，axios可直接自动解析为可用JS对象，不需要额外处理。

1. 把english-phobia.js重命名为english-phobia.json，删除JS导出语法，保留纯数据结构：

{
  "x": [
    {
      "id": 303,
      "rating": 5,
      "phobiaName": "xanthophobia",
      "description": "fear of the color yellow"
    },
    {
      "id": 304,
      "rating": 5,
      "phobiaName": "xenophobia",
      "description": "fear of strangers"
    },
    {
      "id": 305,
      "rating": 5,
      "phobiaName": "xerophobia",
      "description": "fear of dryness"
    },
    {
      "id": 306,
      "rating": 5,
      "phobiaName": "xylophobia",
      "description": "fear of forests"
    }
  ]
}

2. 修改请求代码，解析后可直接调用map遍历：

const [englishData, setEnglishData] = useState([]);
useEffect(() => {
  const fetchData = async () => {
    const res = await axios.get('./src/shared/english-phobia.json');
    setEnglishData(res.data.x);
    // 后续直接用englishData.map即可遍历渲染
  };
  fetchData();
}, []);

方案2：直接导入本地JS文件（无需发请求）

你的JS文件在项目src源码目录内，属于本地静态资源，可以直接用ES模块导入，不需要发送axios请求：

import { ENGLISHDICO } from './src/shared/english-phobia.js';
// 直接赋值即可，不需要写useEffect发请求
const [englishData, setEnglishData] = useState(ENGLISHDICO.x);

方案3：必须动态请求JS文件的处理方式

如果有特殊场景必须动态请求JS文件，拿到响应文本后可以通过函数构造的方式解析内容，注意该方法仅适用于完全可控的本地文件，否则存在XSS安全风险：

const [englishData, setEnglishData] = useState([]);
useEffect(() => {
  const fetchData = async () => {
    const res = await axios.get('./src/shared/english-phobia.js');
    // 解析JS字符串得到导出对象
    const module = { exports: {} };
    new Function('module', res.data)(module);
    setEnglishData(module.exports.ENGLISHDICO.x);
  };
  fetchData();
}, []);

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