如何使用Fetch API 的异步功能来在网页上动态加载和显示.txt文本文件内容？

在网页上使用Fetch API的异步功能加载和显示`.txt`文本文件的内容，你可以按照以下步骤操作：

1. 首先，在JavaScript中创建一个fetch请求，指定文件的URL。例如：

const fetchTextFile = async () => {
  const response = await fetch('path/to/your/textfile.txt');
};

这里的`path/to/your/textfile.txt`需要替换为你实际的文本文件地址。

2. 使用`await`关键字是因为`fetch`返回的是一个Promise，所以我们需要等待这个请求完成。如果成功，响应将包含文件数据。

3. 处理响应结果，通常我们会检查状态码是否为200（表示成功），然后获取文本内容。可以这样做：

async function fetchData() {
  try {
    const response = await fetchTextFile();
    if (response.ok) {
      const text = await response.text(); // 等待解析成文本
      displayContent(text);
    } else {
      console.error(`Failed to load file. Status code: ${response.status}`);
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData(); // 调用函数开始异步加载

4. `displayContent(text)`函数用于在页面上展示文本内容。这可能是一个简单的元素设置innerHTML，或者更复杂地显示在一个单独的模块或者模态框中。