带有 fetch 的 JS async/await 与 PHP include for JSON 文件不同

Question

下面的代码可以在 PHP 中运行，但不能在 JS 中运行。你能告诉我为什么吗？我怎样才能让纯JS版本工作？

async function cccrFlow() {
    response = await fetch('assets/club_mems.json');
    club_mems = [];
    club_mems = await response.json(); // DOESN"T WORK
}

function cccrFlow() {
    club_mems = <?php include('assets/club_mems.json');?>; //  WORKS PERFECTLY
}

Club_mems.json

[{"Name":"Ahmedistan, Jamshed","clubEXP":"2022-09-15"},{"Name":"Anaizi, Paul N","clubEXP":"2021-01-27"},{"Name":"Anderson, Simon","clubEXP":"2022-06-30"},{"Name":"Ashes, Bob P","clubEXP":"2022-04-21"}]

Answer 1

当您使用 fetch 时，您必须确保您正在加载的任何资产/资源都是可公开访问的。简而言之，

如果您在浏览器中使用此 URLhttp://yourserver.com/assets/club_mems.json并且您可以在浏览器中看到响应，那么您fetch/async/await将工作（参见屏幕截图）。

如果您不想在公共领域公开数据，那么您必须使用其中一种模块加载方法（即import/require.

编辑

为了实现这一点：您的开发环境中需要有某种模块加载器。模块加载器将确保一旦您为产品环境构建应用程序，您的代码就可以毫无问题地包含 JSON 数据。

有不同的选项：webpack、bundlr、parcel 等。查看他们的官方网站了解如何设置它们。

设置完成后，您只需编写代码即可：

const jsonData = require("/path/to/club_mems.json");

or

import jsonData from "/path/to/club_mems.json"