首页 > web前端 > js教程 > 正文

您是否尝试过 JavaScript 中的所有 API 调用?这里有一些方法可以做到这一点

PHPz
发布: 2024-07-18 08:03:09
原创
525 人浏览过

Have you tried all API calls in JavaScript? Here are ays to do it

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 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 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 现在不太常用,但它仍然出现在较旧的项目中。

<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    $.ajax({
        url: "https://api.example.com/data",
        method: "GET",
        success: function(data) {
            console.log(data); // Log the response data
        },
        error: function(error) {
            console.error('Error:', error); // Log any errors
        }
    });
});
</script>
登录后复制

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

以上是您是否尝试过 JavaScript 中的所有 API 调用?这里有一些方法可以做到这一点的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!