前端调用Fetch，轻松实现流式请求和打字机效果

前端

2023-07-11 21:55:18

利用 Fetch API 探索流式请求的强大功能

前端开发领域发生了巨大的转变，Fetch API 已成为数据传输的卓越之选。凭借其处理流式请求的非凡能力，Fetch API 已然成为前端开发者的利器。

揭开流式请求的真谛

流式请求是一种创新型请求方式，可让开发者持续接收并处理数据，打破了传统请求的局限性。这类似于收听音乐流媒体服务，数据会随着时间推移而逐个字节地传送，让开发者可以即时处理数据，从而显著提升数据传输的效率。

用 Fetch API 实现流式请求

要利用 Fetch API 实现流式请求，你需要采取以下步骤：

定义一个 Fetch 请求函数： 创建一个接受 URL 参数并返回 Promise 对象的函数。Promise 对象将包含流式请求的数据。
监听流式请求数据： 使用 Promise 对象，监听流式请求的数据，并使用 read() 方法不断接收数据。

代码示例：

const fetchStreamData = (url) => {
  return fetch(url, {
    method: 'GET',
    headers: {
      'Accept': 'text/event-stream',
    }
  });
};

const streamData = fetchStreamData(url);
streamData.then(response => {
  response.body.getReader().read().then(({value, done}) => {
    if (!done) {
      // 处理数据
      console.log(value);
    }
  });
});

模拟逼真的打字机效果

现在，我们拥有了流式请求的基础，让我们将其用于模拟逼真的打字机效果。

创建 HTML 元素： 创建一个用于显示文本的 HTML 元素，例如
或
。
发送流式请求： 向文本文件或其他文本内容来源发送流式请求。
动态添加数据： 使用 DOM 操作，将接收的数据动态添加到 HTML 元素中。
使用定时器模拟打字效果： 利用定时器控制数据的显示速度，使其逐个字符地输出。
美化效果： 添加样式以增强视觉效果，使打字机效果更加真实。

代码示例：

<div id="typewriter"></div>

<script>
  const typewriter = document.getElementById('typewriter');

  const fetchStreamData = (url) => {
    return fetch(url, {
      method: 'GET',
      headers: {
        'Accept': 'text/event-stream',
      }
    });
  };

  const streamData = fetchStreamData('text.txt');
  streamData.then(response => {
    response.body.getReader().read().then(({value, done}) => {
      if (!done) {
        typewriter.textContent += String.fromCharCode(value);
        setTimeout(() => {
          streamData.then(response => {
            response.body.getReader().read().then(({value, done}) => {
              if (!done) {
                typewriter.textContent += String.fromCharCode(value);
              }
            });
          });
        }, 100);
      }
    });
  });
</script>