在前端应用程序中，您可能需要从 URL 路径或查询参数中获取 JSON 数据。这种情况下，您可以使用 JavaScript 内置的 Fetch API 或 XMLHttpRequest（XHR）对象来从 URL 获取 JSON 数据。
使用 Fetch API 获取 JSON
Fetch API 是一种现代的异步数据获取方式，它提供了一种直接从 URL 获取 JSON 数据的简单方法。
以下是一个使用 Fetch API 获取 JSON 的示例：
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));在这个示例中，我们首先调用 fetch() 方法并传递要获取数据的 URL。然后，在 Promise 链中，我们使用 response.json() 将响应内容解析为 JSON 格式。最后，我们将解析后的数据输出到控制台。
请注意，fetch() 方法返回一个 Promise 对象，所以我们可以使用 .then() 和 .catch() 方法来处理异步操作的结果和错误。
使用 XMLHttpRequest 获取 JSON
XMLHttpRequest 是一种较老的异步数据获取方式，但是它仍然被广泛使用。对于从 URL 获取 JSON 数据，我们可以使用 XMLHttpRequest.responseType = 'json' 属性来自动将响应内容解析为 JSON 格式。
以下是一个使用 XMLHttpRequest 获取 JSON 的示例：
-- -------------------- ---- ------- ----- --- - --- ----------------- --------------- --------------------------------- ---------------- - ------- ---------- - ---------- - -------------------------- -- ----------- - ---------- - ---------------------- -- -----------
在这个示例中，我们首先创建了一个新的 XMLHttpRequest 对象，并使用 open() 方法指定要获取数据的 URL。然后，我们将 responseType 属性设置为 'json'，以便自动将响应内容解析为 JSON 格式。在 onload 回调函数中，我们将解析后的 JSON 数据输出到控制台。如果请求出错，则会触发 onerror 回调函数。
总结
以上就是从 JavaScript 中的 URL 获取 JSON 数据的两种常见方法：Fetch API 和 XMLHttpRequest。无论您使用哪种方法，都需要注意异步操作以及处理 Promise 或回调函数中可能出现的错误。希望这篇文章能够帮助您更好地理解如何获取 URL 中的 JSON 数据，并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11876