获取外部 API 节点 JS

介绍

在开发 Web 应用程序时，通常需要从外部API获取数据。获取这些数据的最常见方法之一是使用 JavaScript 从外部节点中获取 API 数据。

在本文中，我们将介绍获取外部 API 节点 JS 的几种方法，包括：

1. XMLHttpRequest（XHR）对象
2. Fetch API
3. Axios

XMLHttpRequest（XHR）对象

XHR 是一个 Web API，用于与服务器进行交互。它允许我们使用 JavaScript 发送 HTTP 请求和接收 HTTP 响应。

以下是使用 XMLHttpRequest 发送 GET 请求获取外部 API 数据的示例代码：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
  if (this.status === 200) {
    console.log(this.responseText);
  } else {
    console.error(`Error ${this.status}: ${this.statusText}`);
  }
};

xhr.onerror = function() {
  console.error('Request failed');
};

xhr.send();

在上述代码中，我们首先创建一个 XHR 对象。然后通过 open() 方法指定 HTTP 请求的类型，URL 和是否异步。接下来，我们使用 onload() 和 onerror() 事件处理程序来处理请求的结果。最后，我们使用 send() 方法发送请求。

Fetch API

Fetch API 是一种更现代的方法，用于向服务器发送和获取数据。它基于 Promise，并且是一种更简洁的方法，可以通过链式调用处理数据。

以下是使用 Fetch API 发送 GET 请求获取外部 API 数据的示例代码：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上述代码中，我们首先使用 fetch() 方法发送 HTTP GET 请求，返回一个 Promise。然后使用 then() 方法处理响应并进行错误检查。最后，使用 json() 方法将响应转换为 JSON 格式。如果请求失败，则使用 catch() 方法处理错误。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于从服务器获取数据。它可以用于浏览器和 Node.js 环境中。Axios 提供了许多功能，例如拦截器，取消请求，身份验证等等。

以下是使用 Axios 发送 GET 请求获取外部 API 数据的示例代码：

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

在上述代码中，我们使用 get() 方法发送 HTTP GET 请求。然后使用 then() 方法处理响应，并打印响应的数据。最后，使用 catch() 方法处理错误。

总结

以上，我们介绍了三种不同的 JavaScript 获取外部 API 数据的方法。使用 XMLHttpRequest，Fetch API 或 Axios 发送 HTTP 请求都可以获取数据，你可以根据具体情况选择适合你的方法。