导入 JSON 打字稿 - JavaScript

在开发 JavaScript 应用程序时，需要将数据从服务器或其他应用程序导入。JSON (JavaScript Object Notation) 是一种常用的数据格式，被广泛用于 Web 应用程序和 API 中。JavaScript 中使用 JSON.parse() 方法把 JSON 数据转换为 JavaScript 对象，JSON.stringify() 方法把 JavaScript 对象转换为 JSON 数据。在本文中，我们将介绍如何导入 JSON 打字稿到 JavaScript 应用程序中。

导入 JSON 数据

要导入 JSON 数据到 JavaScript 应用程序中，需要先创建一个 JSON 文件，然后使用 fetch() 或 XMLHttpRequest 对象读取该文件。fetch() 是用于执行 web 请求的新 API，在大多数现代浏览器中都可使用。XMLHttpRequest 对象则是较旧的 API，但由于在所有浏览器中都可使用，因此仍然被广泛使用。下面是一个使用 fetch() 导入 JSON 数据的示例：

fetch('data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

如果使用 XMLHttpRequest 对象，代码如下所示：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error(xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('An error occurred.');
};
xhr.send();

在上述示例中，我们从名为 data.json 的文件中读取 JSON 数据，并将其作为 JavaScript 对象打印到控制台中。

导入外部 JSON API

另一种从服务器导入 JSON 数据的方法是通过 Web API（通常称为 RESTful API）。与读取文件不同，使用 Web API 需要发送 HTTP 请求，然后解析服务器响应的 JSON 数据。下面是一个使用 fetch() 导入外部 JSON API 的示例：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上述示例中，我们使用名为 JSONPlaceholder 的公共 API，在服务器上获取帖子的 JSON 数据。获取到数据后，用同样的方式将其转换为 JavaScript 对象并将其打印到控制台中。

将 JavaScript 对象转换为 JSON 数据

有时需要将 JavaScript 对象转换为 JSON 数据。例如，当向服务器发送数据时，需要将其转换为 JSON 格式。这可以使用 JSON.stringify() 方法完成。下面是一个将 JavaScript 对象转换为 JSON 数据的示例：

const myObj = { name: 'John', age: 30, city: 'New York' };
const myJSON = JSON.stringify(myObj);
console.log(myJSON);

在上述示例中，我们首先创建一个名为 myObj 的 JavaScript 对象，然后使用 JSON.stringify() 方法将其转换为 JSON 数据并打印到控制台中。

结论

本文介绍了如何导入 JSON 打字稿到 JavaScript 应用程序中。我们看到了两个常见的方法：从文件中读取 JSON 数据和从服务器上获取 JSON API。我们还学习了如何将 JavaScript 对象转换为 JSON 数据。