在 JavaScript 中从 API 获取数据

在现代 Web 开发中，从应用程序中获取数据的最常见方式是通过 API（应用程序编程接口）。API 是一组允许你的应用程序与其他软件应用程序或服务进行通信的规则和协议。这允许你的应用程序访问并利用其他服务（例如 Twitter、Google Maps 或 OpenWeatherMap）所提供的数据。

在 JavaScript 中，使用 XMLHTTPRequest 或 Fetch API 可以轻松地从 API 中获取数据。本文将探讨如何使用这两个工具从 API 中获取数据。

XMLHTTPRequest

XMLHTTPRequest 是一种原始的 AJAX 技术，但仍然被广泛使用。XMLHTTPRequest 可以在客户端和服务器之间交换数据，而不必刷新整个页面。下面是一个使用 XMLHTTPRequest 从 API 获取数据的代码示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
    if (this.status === 200) {
        const data = JSON.parse(this.responseText);
        console.log(data);
    }
};
xhr.send();

在上面的代码中，我们创建了一个 XMLHttpRequest 对象，然后打开了一个 GET 请求。然后，我们为请求设置了一个 onload 回调函数，该函数在请求完成时触发。如果请求成功，我们将返回的数据解析为 JSON 格式，并将其发送到控制台。

Fetch API

Fetch API 是现代的 AJAX 技术，并且比 XMLHTTPRequest 更易于使用。Fetch API 通过 JavaScript 内置的 Promise 对象提供了更简洁的语法。以下是使用 Fetch API 获取数据的代码示例：

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

这里，我们使用 fetch() 函数发出 GET 请求，该函数将返回一个 Promise。我们可以使用该 Promise 的 then() 方法将响应解析为 JSON 格式，然后发送到控制台。我们还可以使用 catch() 方法捕获任何错误。

总结

这些是从 API 中获取数据的两种主要方式——XMLHTTPRequest 和 Fetch API。XMLHTTPRequest 更老牌，但 Fetch API 更简洁、更现代，并且可以使用 JavaScript 内置的 Promise 对象。无论你选择哪种方式，都应该有足够的知识来使用它。