较大的数据请求

解决方案：使用 Fetch API 和 ReadableStream API 来异步加载并渲染文本文件

实现思路

1. 首先，使用 document.querySelector 方法获取一个名为 article 的 DOM 元素，该元素将用于显示文本内容。
2. 然后，定义了一个 url 变量，它存储了要加载的文本文件的 URL。
3. 接下来，创建了一个 TextDecoder 对象，用于将字节数组解码为字符串。这个对象可以使用 new TextDecoder() 来创建。
4. 然后，定义了一个名为 loadText 的异步函数，该函数使用 fetch 方法来获取文本文件的内容。fetch 方法返回一个 Promise 对象，该对象在响应可用时解析为 Response 对象。
5. 在 loadText 函数中，使用 response.body.getReader() 方法获取一个 ReadableStreamDefaultReader 对象，该对象可以用于读取响应体的内容。
6. 然后，使用一个无限循环来读取响应体中的数据。在每次循环中，使用 reader.read() 方法读取一段数据。该方法返回一个 Promise 对象，该对象在数据可用时解析为一个包含 value 和 done 属性的对象。
7. 如果 done 属性为 true，则表示已经读取完了响应体的所有数据，退出循环。
8. 否则，使用 TextDecoder 对象的 decode 方法将 value 属性中的字节数组解码为字符串，并将其添加到 article 元素的 innerHTML 属性中，以显示在页面上。
9. 最后，调用 loadText 函数来开始加载并渲染文本文件。

const article = document.querySelector(".article");
const url =
  "https:///files/novel.txt";
const decoder = new TextDecoder(); // 创建解码器

/* 获取数据 */
const loadText = async () => {
  const response = await fetch(url); // 请求数据
  const render = response.body.getReader(); // 得到响应体

  while (true) {
    const { value, done } = await render.read();

    if (done) break;

    const text = decoder.decode(value); // 解码数据，返回的是字节数组，需要手动解码
    article.innerHTML += text;
  }
};

loadText();