Ionic框架下.js脚本读取JSON文件失败的问题求助

问题分析 #

1. fetch返回pending Promise：fetch是异步操作，直接打印变量时Promise还未完成，即便用await也需要配合async函数正确处理流程。
2. require未定义：Ionic采用ES模块系统，默认不支持CommonJS的require语法，手动添加require.js无法直接适配项目的模块机制。

解决方案 #

方案1：正确使用async/await处理fetch #

修改read_json为异步函数，确保等待Promise完成后再处理数据：

// src/utils/utils.js
export async function read_json(){
    // 建议将config.json移到public/configs目录，此时路径改为'/configs/config.json'，避免编译后路径混乱
    const response = await fetch('./configs/config.json');
    if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
    }
    const json_data = await response.json();
    console.log(json_data);
    return json_data;
}

在Tab1.tsx中调用时，需在异步函数内使用await：

// src/pages/Tab1.tsx
import { read_json } from '../utils/utils';

// 示例：在组件的useEffect中调用
useEffect(() => {
    async function loadConfig() {
        try {
            const config = await read_json();
            // 在这里处理配置数据
        } catch (err) {
            console.error('加载配置失败：', err);
        }
    }
    loadConfig();
}, []);

方案2：直接导入JSON文件（推荐） #

Ionic依赖的构建工具（如Vite）默认支持ES模块导入JSON，无需使用fetch或require：

// src/utils/utils.js
// 直接导入JSON文件
import config from './configs/config.json';

export function read_json(){
    console.log(config);
    return config;
}

在Tab1.tsx中直接调用即可：

// src/pages/Tab1.tsx
import { read_json } from '../utils/utils';

useEffect(() => {
    const config = read_json();
    // 处理配置数据
}, []);

方案3：放弃require的使用 #

Ionic项目不依赖CommonJS的require语法，手动引入require.js无法适配项目的模块系统，建议使用上述两种ES模块兼容的方式读取JSON。

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