Vanilla JS：如何检索 json 文件，将结果解析为数组，并访问每个对象

Question

假设我有一个名为 map.json 的 json 文件：

{
    "images":{
        "background": ["images/mountains.png","images/sea.png"]
    }
}

我想要的是让 javascript 访问 map.json 中的“images/mountains.png”并稍后使用它来检索 mountain.png 文件。我在网上找到了我在整个代码之上使用的这个简洁的代码：

var xh_req = new XMLHttpRequest();
xh_req.open("GET", "map.json", false);
xh_req.send(null);
var json_object = JSON.parse(xh_req.responseText);

这基本上是允许javascript通过简单地输入json_object.images.background[n]来访问map.json中的对象。因此，如果我想从 map.json 中获取“images/sea.png”，我只需输入 json_object.images.background[1] 即可。如果不是控制台不断向我发出警告，这将是结束。它说：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

在接下来的几个小时里，我一直在尝试通过阅读论坛和 XMLHttpRequest 文档来解决这个问题，并使用我找到的任何知识来重写与上述功能相同的代码。然而，我似乎做不到。我可能错过了一些重要的点，这就是为什么我仍然无法编写正确的代码。谁能帮我解决这个问题？

Answer 1

该代码的问题在于它使用false 作为async 参数。

最小的改变是这样做：

var xh_req = new XMLHttpRequest();
xh_req.open("GET", "map.json"); // No `false`
xh_req.send(null);
xh_req.onload = () => {
    const data = JSON.parse(xh_req.responseText);
    // ...your code using `data` (it's not JSON, so I renamed it) here...
};
xh_req.onerror = error => {
    // ...show/handle error...
};

但是，我建议改用fetch：

fetch("map.json")
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
    }
    return response.json();
})
.then(data => {
    // ...your code using `data` here...
})
.catch(error => {
    // ...show/handle error...
});

请注意，在这两种情况下，任何想要使用文件数据的代码都必须在调用完成之前不能运行，这就是为什么我在上面使用data的代码放置了占位符

如果您使用现代浏览器并将代码作为模块加载，则可以使用顶级await，如果您可以不自己处理错误而让浏览器转储，这将特别方便它到控制台：

// In a type="module" script on a modern browser
const response = await fetch("map.json");
if (!response.ok) {
    throw new Error(`HTTP error ${response.status}`);
}
const data = await response.json();
// ...your code using `data` here...

不过，这不是处理错误。