您是否尝试过 JavaScript 中的所有 API 调用？

百变鹏仔 3天前 #JavaScript

文章标签您是否

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 =&gt; response.json())    .then(data =&gt; console.log(data)) // log the response data    .catch(error =&gt; 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 =&gt; {        console.log(response.data); // log the response data    })    .catch(error =&gt; {        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 调用？

xmlhttp请求 (xhr)

获取api

阿克西奥斯

jquery ajax

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？