对于此示例，我们将从几个不同的文本文件中请求数据，并使用它们来填充内容区域。

这一系列文件将假定为我们的数据库；在实际的应用程序中，我们更有可能使用服务端语言（如 PHP、Python 或 Node）从数据库中获取数据。但在这里，我们希望保持简单并专注于客户端部分。

要开始此示例，请在计算机的新的目录中创建 fetch-start.html 和四个文本文件（verse1.txt、verse2.txt、verse3.txt 和 verse4.txt）的本地拷贝。在这个示例中，当你在下拉菜单中选择一个选项时，我们会获取不同的诗歌（你可能会认识）。

在 元素中，添加以下代码。这会存储对 和 元素的引用，并对 元素添加一个事件监听器，以便在用户选择一个新的值时，新值将作为参数传递给名为 updateDisplay() 的函数。

下面让我们定义 updateDisplay() 函数。首先，将以下内容放在你之前的代码块下方——这是该函数的空壳。

让我们将通过构造一个指向我们要加载的文本文件的相对 URL 来开始编写函数，因为我们稍后需要它。任何时候 元素的值都与所选的 内的文本相同（除非在值属性中指定了不同的值）——例如“Verse 1”。相应的诗歌文本文件是“verse1.txt”，并与 HTML 文件位于同一目录中，因此只需要文件名即可。

但是，web 服务器往往是区分大小写的，且文件名没有空格。要将“Verse 1”转换为“verse1.txt”，我们需要将 V 转换为小写、删除空格，并在末尾添加“.txt”。这可以通过 replace()、toLowerCase() 和模板字符串来完成。在 updateDisplay() 函数中添加以下代码：

最后，我们可以开始使用 Fetch API 了：

这里有很多内容需要展开。

首先，Fetch API 的入口点是一个名为 fetch() 的全局函数，它以 URL 为参数（其使用另一个可选参数来进行自定义设置，但我们在这里不使用它）。

接下来，fetch() 是一个异步 API，会返回一个 Promise。如果你不知道什么是 Promise，请参阅异步 JavaScript 章节，然后再回到这里。你会发现那篇文章也介绍了 fetch() API！

因为 fetch() 返回一个 promise，所以我们将一个函数传递给它返回的 promise 的 then() 方法。此方法会在 HTTP 请求收到服务器的响应时被调用。在它的处理器中，我们检查请求是否成功，并在请求失败时抛出一个错误。否则，我们调用 response.text() 以获取文本形式的响应正文。

response.text() 也是异步的，所以我们返回它返回的 promise，并向新的 promise 的 then() 方法传递一个函数。这个函数会在响应文本可用时被调用，在这个函数中，我们会使用该文本更新 块。

最后，我们在最后链式调用 catch() 处理器，以捕获我们调用的异步函数或其他处理器中抛出的任何错误。

此示例的一个问题是，它在第一次加载时不会显示任何诗歌。要解决此问题，请在代码的最后（ 结束标签之前）添加以下两行代码，以默认加载第一首诗歌，并确保 元素始终显示正确的值：