JS异步/等待与fetch不像PHP包含的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时，必须确保所加载的任何资产/资源都是可公开访问的。总之,

如果您在浏览器http://yourserver.com/assets/club_mems.json中使用这个URL，并且您可以在浏览器中看到响应，那么您的fetch/async/await就会工作(见屏幕截图)。

如果您不想在公共域中公开数据，那么您必须使用一种模块加载方法(即import/require )来包含JSON文件。

编辑

要做到这一点:您需要在您的开发环境中有某种模块加载程序。模块加载程序将确保一旦您为prod环境构建了应用程序，您的代码就会包含JSON数据，而不会有任何问题。

有不同的选择: webpack，邦德尔，包裹等，查看他们的官方网站，如何设置它们。

设置好之后，您可以简单地在代码中编写：

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);
    })
}