JavaScript 中调用 API 的不同方法是什么？

TL;DR

在 JavaScript 中，您可以使用多种方法调用 API。最常见的方法是 XMLHttpRequest、fetch 和第三方库，如 Axios。XMLHttpRequest 是传统方法，但更冗长。fetch 是现代方法，返回 promise，使其更易于使用。Axios 是一个流行的第三方库，它简化了 API 调用并提供了附加功能。

JavaScript 中调用 API 的不同方法

XMLHttpRequest

XMLHttpRequest 是在 JavaScript 中调用 API 的传统方法。与现代方法相比，它更冗长，需要更多代码。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

Fetch API

fetch 是一种现代且更方便的调用 API 的方法。它返回一个 promise，使处理异步操作更容易。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) =>
    console.error('There was a problem with the fetch operation:', error),
  );

Axios

Axios 是一个流行的第三方库，它简化了 API 调用。它提供了额外的功能，如拦截器、自动 JSON 转换等。

axios
  .get('https://api.example.com/data')
  .then((response) => console.log(response.data))
  .catch((error) =>
    console.error('There was a problem with the Axios request:', error),
  );

jQuery AJAX

jQuery 还提供了一个 ajax 方法来调用 API。这种方法在现代开发中不太常见，但在一些遗留项目中仍然使用。

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function (data) {
    console.log(data);
  },
  error: function (error) {
    console.error('There was a problem with the jQuery AJAX request:', error);
  },
});

练习

测试版