API 调用是现代 Web 开发的关键部分。 JavaScript 提供了多种方法来完成此任务,每种方法都有自己的优点和缺点。本文将向您介绍在 JavaScript 中进行 API 调用的四种主要方法,您可以在项目中使用它们。
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();
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 库进行 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中文网其他相关文章!