在构建现代 Web 应用程序时，数据通常以JSON（JavaScript 对象表示法的缩写）的形式呈现。JSON 是一种用于在 Web 浏览器和服务器之间共享数据的简单格式。它轻量级、易于阅读，并且与 JavaScript 完美兼容。
但问题是：获取和处理 JSON 数据并非即时完成。
这时，异步 JavaScript就派上用场了。它允许你从服务器获取数据，而不会冻结应用程序或让用户等待太久。
在这个简单易懂的指南中，您将了解如何使用 JavaScript 的异步工具（如 Fetch API 和 async/await）处理 JSON 数据。
您将学到什么
阅读完本指南后，您将了解：
JSON 是什么以及为什么它在 Web 开发中如此重要
如何使用 Fetch API 获取 JSON 数据
如何异步处理 JSON 响应
如何在应用程序中显示和使用 JSON 数据
使用 JSON 时应避免的常见错误
理解 JavaScript 中的 JSON
在学习如何获取和使用 JSON 之前，了解 JSON 的真正含义非常重要。
JSON（JavaScript 对象表示法）是一种以键值对形式存储信息的数据格式，很像 JavaScript 对象。
让我们看一个 JSON 数据的示例：
{
"name": "Wisdom",
"age": 30,
"city": "Port Harcourt"
}如您所见，JSON 看起来像 JavaScript 对象，但它是以文本形式编写的。
要在 JavaScript
中使用它，必须使用将其转换为对象JSON.parse()。
而当将数据发送到服务器时，则使用
将其转换回字符串JSON.stringify()。
现在您已经了解了什么是 JSON，让我们看看如何从服务器获取它。
异步获取 JSON 数据
在大多数实际应用程序中，数据并不存储在代码中；而是从服务器或外部 API 获取。
JavaScript 提供了Fetch API来使这个过程变得简单而高效。
这是一个简单的例子：
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));工作原理：
fetch()向提供的 URL 发送请求。
response.json()将原始响应转换为可用的 JSON 数据。
第二种方法.then()让你在代码中使用该数据。
.catch()处理任何可能的网络错误。
这是异步的，因为代码在等待数据时继续运行，而不会冻结应用程序。
接下来，让我们研究一下使用 来处理这个问题的更简洁的方法async/await。
使用 Async/Await 处理 JSON
虽然.then()和.catch()可以正常工作，但使用async/await可以使您的代码更清晰、更易于阅读，特别是对于初学者而言。
您可以按照以下方式重写同一示例：
async function getUsers() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) throw new Error('Data could not be retrieved.');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error.message);
}
}
getUsers();这里发生了什么：
您可以使用 async 关键字在函数内部使用 await。
await暂停代码直到承诺（数据请求）完成。
response.json()将服务器响应转换为可读的 JSON。
该try...catch块处理可能发生的任何错误。
使用async/await使您的代码看起来更像常规的分步说明，更容易遵循。
现在您已经知道如何获取 JSON，让我们看看如何使用和显示它。
使用 JSON 数据
获取 JSON 数据后，您可以以不同的方式使用它，例如在网页上显示它或存储它以供日后使用。
例子：
async function showUserNames() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
users.forEach(user => {
console.log(`Name: ${user.name}, Email: ${user.email}`);
});
}
showUserNames();此示例循环遍历 JSON 数据并记录每个用户的姓名和电子邮件。
您可以轻松修改它以使用 DOM 操作在 HTML 元素中显示数据。
现在您可以处理 JSON 数据，让我们看一下初学者常犯的一些错误。
应避免的常见错误
初学者在异步处理 JSON 时，经常会犯一些简单但可以避免的错误。以下是一些需要注意的事项：
忘记使用.json()：如果没有它，您将获得无法读取的数据。
不检查response.ok：在使用数据之前，请务必验证您的请求是否成功。
忽略错误：包装您的代码try...catch以处理失败的请求。
混合使用 async 和 then()：选择一种方法来获得更清晰、更一致的代码。
避免这些错误将使您的代码更加流畅和可靠。
结论
对于任何学习 Web 开发的人来说，用 JavaScript 处理 JSON 数据都是一项关键技能。它是你的网站与服务器和外部 API 通信的方式。
通过学习使用Fetch
API和async/await，你可以轻松地异步获取、读取和使用 JSON 数据，而不会冻结你的应用。
记住要正确处理错误，检查响应，并保持代码简洁。你练习获取和显示 JSON 数据的次数越多，你在实际使用 API 时就会越有信心。