通过在 JavaScript 中使用 API 获取数据。

构建 Web 应用程序时，发出 HTTP 请求是一项常见任务。在 JavaScript 中，有多种方法可以实现此目的，每种方法都有自己的优点和用例。在这篇文章中，我们将探讨四种流行的方法：fetch()、axios()、$.ajax() 和 XMLHttpRequest()，并为每个方法提供简单的示例。

1。使用 fetch()
fetch() 函数允许您请求 HTTP 从网络获取资源。它使用 Promise，这使得处理异步操作变得更加容易。

示例

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

2。使用 Axios()
axios() 是一种流行的 HTTP 客户端，用于从浏览器或 Node.js 应用程序发出请求。它类似于内置的 fetch() API，但包含其他功能，例如请求和响应拦截器、自动 JSON 解析等。

示例

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3。使用 $.ajax()
如果您使用 jQuery，则可以使用 $.ajax() 函数发出 HTTP 请求。它提供了一个简单的接口来发出 AJAX 请求和处理响应。

示例

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

4。使用 XMLHttpRequest()
XMLHttpRequest 对象提供了一种无需刷新页面即可从 URL 获取数据的简单方法。它比 fetch() 或像 Axios 这样的库要低一些，但它仍然在许多应用程序中广泛使用。

示例

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

在此示例中，我们创建一个新的 XMLHttpRequest，打开一个 GET 请求，并通过检查状态代码和解析响应文本来处理响应。

以上是通过在 JavaScript 中使用 API 获取数据。的详细内容。更多信息请关注PHP中文网其他相关文章！