JS async / await with fetch 不能像 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 时，您必须确保您正在加载的任何 asset/resource 都可以 public 访问。简而言之，

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

如果您不想在 public 域中公开您的数据，则必须使用模块加载方法之一（即 import/require）包含 JSON 文件。

编辑

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

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

设置完成后，您只需在代码中写入：

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

or

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

Answer 2

试试这个解决方案：

function cccrFlow() {
    club_mems = fetch('assets/club_mems.json')
    .then(response => response.json())
    .then(data => {
        console.log(data)
        alert(data);
    })
}

JS async / await with fetch 不能像 PHP include for JSON 文件那样工作

JS async / await with fetch doesn't work like PHP include for JSON file

javascript

fetch-api

club_mems.json