编程技术

Document

使用 JavaScript 获取和显示 API 数据

在本教程中，您将学习如何从远程 API 获取数据并将该数据输出到 HTML 页面中。学习使用 API 数据是开发人员需要学习的一项重要技能。许多网站和应用程序依赖内部或外部 API 为前端提供数据。

我们将使用的 API 是TheCocktailDB ，这是一个免费的 API，包含 600 多种鸡尾酒配方，不需要帐户即可访问。如果鸡尾酒不是您的菜，还有TheSportsDB、TheAudioDB和TheMealDB，所有这些都是免费且公开提供的。

我们将构建一个页面来获取如下所示的随机鸡尾酒配方：
在这里插入图片描述
让我们开始创建一个具有以下标记的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset