获取API JavaScript

在现代的Web应用程序中，获取API是极其常见的。Javascript提供了许多有用的方法来获取API，这使得与后端服务器通信变得更加容易。在本文中，我们将对使用Javascript获取API进行介绍。

跨域资源共享

在Javascript中，由于同源策略的限制，我们不能直接从不同的域获取资源。 这就是为什么跨域资源共享（CORS）是必不可少的原因。通过CORS，我们可以在Javascript中访问指定的API，而不必担心跨域请求的问题。

XMLHttpRequest

在Javascript中，XMLHttpRequest是一种用于从Web服务器获取数据的API。该API是通过HTTP协议进行通信的。 借助XMLHttpRequest，我们可以轻松地向服务器发送请求，并获取响应。

以下是一个使用XMLHttpRequest获取API的代码示例（用于从https://jsonplaceholder.typicode.com/posts获取文章列表）:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};
xhr.send();

在上面的代码示例中，我们通过创建XMLHttpRequest对象并使用open方法指定HTTP请求类型。我们还指定了要访问的API地址和是否在异步模式下运行请求。最后，我们通过send方法发送请求。

在响应返回时，我们可以将响应存储在xhr.response中。在这个例子中，我们简单地将响应打印在控制台中。但是，在实际应用程序中，你需要进行一些适当的数据处理。

Fetch API

Fetch API是最近引入的API，用于替代XMLHttpRequest。它提供了一种更现代和简洁的方式来获取API。

以下是使用Fetch API获取API的代码示例：

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

在上面的代码示例中，我们只需提供API地址即可使用Fetch API。在响应返回时，我们可以将响应转换为JSON对象并将其存储在data变量中，然后将其输出到控制台中。

总结

在本文中，我们介绍了使用Javascript获取API的两种方法，并提供了相应的代码示例。虽然XMLHttpRequest和Fetch API都可以用来获取API，但Fetch API是一种更现代和简洁的方法。 无论你使用哪种方法，获取API都是一种非常有用的功能，因为它可以使你的Web应用程序与后端服务器通信。