API 调用是现代 Web 开发的关键部分。 JavaScript 提供了多种方法来完成此任务，每种方法都有自己的优点和缺点。本文将向您介绍在 JavaScript 中进行 API 调用的四种主要方法，您可以在项目中使用这些方法。

XMLHttp请求（XHR）

XMLHttpRequest (XHR) 是调用 API 的传统方式，所有浏览器版本都支持。此方法可靠且广泛使用，尽管其语法有时难以阅读和维护。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText)); // Parse and log the response data
        } else {
            console.error('Error:', xhr.statusText); // Log any errors
        }
    }
};
xhr.send();

获取API

Fetch API 是一种基于承诺的更现代、更简单的 API 调用方式。它支持异步操作，并且很容易使用async和await进行扩展。

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

使用async和await。

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

阿克西奥斯

Axios 是一个流行的 HTTP 请求库，它提供了一个简单且一致的接口来进行 API 调用。需要先使用npm或yarn安装。
npm 安装 axios
或者
纱线添加 axios

然后就可以使用axios进行API调用了：

const axios = require('axios');

axios.get("https://api.example.com/data")
    .then(response => {
        console.log(response.data); // Log the response data
    })
    .catch(error => {
        console.error('Error:', error); // Log any errors
    });

使用async和await：

async function fetchData() {
    try {
        const response = await axios.get("https://api.example.com/data");
        console.log(response.data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

jQuery AJAX

jQuery AJAX 是一种使用 jQuery 库进行 API 调用的方法。尽管 jQuery 现在不太常用，但它仍然出现在较旧的项目中。

来源照片：
拉科齐、格雷格.网站设计书籍。在线的。在：不飞溅。 2016。可从：https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY。 [引用。 2024-07-16].