📅 最后修改于: 2023-12-03 15:24:01.332000 🧑 作者: Mango
在现代Web开发中，许多应用程序需要从API中获取数据并在页面上展示。由于网络请求需要时间，因此我们需要使用异步等待来确保我们的应用程序在等待Web服务器响应时不会冻结。
在这篇文章中，我们将学习如何在JavaScript中使用异步等待获取API数据并在页面上展示。我们将使用jQuery和ES6的async/wait语法来解决这个问题。
在代码中获取API数据之前，我们需要准备一些必要的工具和文件。首先，我们需要使用jQuery和Bootstrap库。这两个工具都可以用CDN链接或安装到本地，具体取决于您的喜好。
您可以在HTML文档的<head>标记中加入以下代码来使用CDN链接：
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
如果您更喜欢将这些文件安装到本地，则可以使用npm（Node.js包管理器）。以下是如何使用npm安装这两个库：
// 安装jQuery
npm install jquery --save
// 安装Bootstrap
npm install bootstrap --save
异步等待是现代JavaScript开发的重要组成部分。在ES6中，我们可以使用async/wait语法来解决异步代码的问题。以下是一个使用async/wait函数的示例：
async function fetchAPI() {
let response = await fetch('https://some-api.com/data');
let json = await response.json();
return json;
}
在上面的示例中，我们首先使用fetch()函数获取API数据。我们使用await关键字等待服务器响应，然后将响应转换为JSON格式。最后，我们返回JSON响应。我们还将整个函数标记为async以表示它是异步函数。
现在我们将使用上面介绍的异步等待函数来获取API数据。以下是获取API数据的完整示例代码：
async function fetchAPI() {
let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let json = await response.json();
return json;
}
$(document).ready(function() {
fetchAPI().then(json => {
console.log(json);
$('#content').html(`
<p><b>User ID:</b> ${json.userId}</p>
<p><b>Title:</b> ${json.title}</p>
<p><b>Completed:</b> ${json.completed}</p>
`);
});
});
我们首先定义了一个异步等待函数fetchAPI()，该函数从JSONPlaceholder模拟API中获取数据。该API返回一个具有userId、id、title和completed属性的JSON对象。
在页面加载完成后，我们调用fetchAPI()函数来获取API数据。一旦我们收到响应，我们将数据呈现到Web页面中。
在上面的代码中，我们首先使用jQuery的$(document).ready()的文档就绪回调函数来确保页面完全加载并准备好使用我们的JavaScript代码。在回调函数中，我们调用fetchAPI()函数并使用then()方法等待将来的响应。我们使用JSON数据填充页面上的元素，例如用户ID、标题和完成状态。
异步等待对Web开发非常重要，可以确保我们的JavaScript代码不会导致UI被冻结。在本文中，我们学习了如何使用异步等待功能从API中获取数据并在Web页面上渲染它们。使用这些示例代码，您可以尝试将相同的技术应用于您自己的项目中。