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

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

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

我想要的是javascript访问map.json中的“images/mountains.png”，然后使用它检索mountains.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);

这基本上是通过键入

json\u object.images.background[n]

允许javascript访问map.json中的对象。因此，如果我想从map.json获取“images/sea.png”，我只需键入

json\u 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文档来解决这个问题，并使用我所发现的任何知识来重写一个与上述功能相同的代码。然而，我似乎做不到。我可能遗漏了一些要点，这就是为什么我仍然无法编写正确的代码。有人能帮我解决这个问题吗？

该代码的问题是它对

async

参数使用了

false

最小的变化是这样做：

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

但是，我建议改为：

请注意，在这两种情况下，在提取文件数据的调用完成之前，任何想要使用文件数据的代码都不能运行，这就是为什么我在上面使用

data

如果您使用的是现代浏览器，并将代码作为模块加载，则可以使用顶级的

wait

，如果您不介意自己处理错误，而是让浏览器将其转储到控制台，这将非常方便：

// 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...

---

不过，这并不是在处理错误。

请参阅和。或者，对于“旧”的

XMLHttpRequest

@SebastianSimon，好的，我将查看这些链接

// 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...