JavaScript中require()加载JSON文件报错的解决方案咨询

这个错误的核心原因是RequireJS是异步模块加载器，你不能直接用同步的require('./updated.json')语法来加载模块——当你调用同步require时，RequireJS还没完成这个JSON文件的加载，所以抛出了这个错误。下面给你两种可行的解决办法：

方法一：改用异步require()配合Promise处理结果 #

RequireJS的标准用法是异步加载模块，我们可以把dwell_times方法改成返回Promise，这样就能正确处理异步加载的结果：

修改imported.js中的import_file类：

class import_file {
  constructor(title) {
    this.title = title;
  }
  dwell_times() {
    console.log('osama');
    const x = [5,4,3,2,1];
    const y = x.toString();
    console.log(y);
    
    // 用Promise封装异步require调用
    return new Promise((resolve, reject) => {
      // 异步加载JSON模块
      require(['./updated.json'], 
        (parsedData) => {
          console.log(parsedData);
          resolve(parsedData);
        },
        (error) => {
          reject(error);
        }
      );
    });
  }
}

然后在main.html中调用的时候，要使用Promise的then方法来获取结果：

<script>
const Import = new import_file('osama');
Import.dwell_times()
  .then(out => {
    console.log('out');
    console.log(out[2]);
  })
  .catch(err => {
    console.error('加载JSON文件失败:', err);
  });
</script>

方法二：使用RequireJS的text插件加载并解析JSON #

RequireJS默认不直接支持JSON文件的加载，我们可以用官方的text插件来读取JSON文本，再手动解析成对象：

1. 首先在main.html中引入text插件：

<script src="https://requirejs.org/docs/release/2.3.6/minified/text.js"></script>

2. 配置RequireJS，让它知道用text插件处理JSON文件：

<script>
requirejs.config({
  paths: {
    'text': 'https://requirejs.org/docs/release/2.3.6/minified/text'
  },
  map: {
    '*': {
      'json': 'text'
    }
  }
});
</script>

3. 修改dwell_times方法，加载JSON文本并解析：

dwell_times() {
  console.log('osama');
  const x = [5,4,3,2,1];
  const y = x.toString();
  console.log(y);
  
  return new Promise((resolve, reject) => {
    require(['text!./updated.json'], 
      (jsonText) => {
        try {
          const parsedData = JSON.parse(jsonText);
          console.log(parsedData);
          resolve(parsedData);
        } catch (parseErr) {
          reject(parseErr);
        }
      },
      (loadErr) => {
        reject(loadErr);
      }
    );
  });
}

调用方式和方法一一样，用then处理结果即可。

额外注意事项 #

• 你在imported.js和main.html中都实例化了import_file，这会导致代码重复执行，建议去掉其中一处的实例化代码。
• 确保updated.json的文件路径是正确的——路径是相对于当前HTML文件的位置，或者你可以通过RequireJS的baseUrl配置来统一管理模块路径。

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