使用Fetch进度指示器：全面指南

最新推荐文章于 2024-11-27 12:31:46 发布

舒林艾Natalie

最新推荐文章于 2024-11-27 12:31:46 发布

阅读量446

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00323/article/details/141987136

使用Fetch进度指示器：全面指南

fetch-progress-indicatorsProgress indicators/bars using Streams, Service Workers, and Fetch APIs项目地址:https://gitcode.com/gh_mirrors/fe/fetch-progress-indicators

项目介绍

欢迎来到 fetch-progress-indicators，这是一个开源项目，致力于在现代Web开发中利用Fetch API、Streams API及Service Worker API来展示文件下载进度。它弥补了Fetch API相较于XMLHttpRequest在进度反馈上的不足，特别是在慢速网络环境下，为用户提供直观的加载状态反馈。通过本项目，开发者可以实现更加丰富且响应式的用户体验，无需依赖于旧有的onprogress事件。

项目快速启动

要迅速体验此项目，首先需要克隆仓库到本地：

git clone https://github.com/anthumchris/fetch-progress-indicators.git
cd fetch-progress-indicators

接下来，若要查看示例运行，你可能需要配置一个服务工作者或者直接访问项目提供的在线演示地址：https://fetch-progress.anthum.com/。对于本地环境的简单体验，可以通过静态服务器服务文件，例如使用http-server或live-server（确保已安装）：

npm install -g live-server
live-server .

然后，在浏览器打开显示的本地地址，你可以观察到基本的进度条展示效果。

应用案例和最佳实践

基础应用：Fetch基本进度指示

在你的JavaScript文件中，集成基本的进度显示逻辑，关键在于使用Fetch API时捕获ReadableStream：

fetch('your-image-url')
  .then(response => {
    const reader = response.body.getReader();
    let bytesReceived = 0;
    
    return new ReadableStream({
      start(controller) {
        function push() {
          reader.read().then(({done, value}) => {
            if(done) {
              controller.close();
              return;
            }
            bytesReceived += value.length;
            controller.enqueue(value);
            controller.desiredSize > 0 && push();
          });
        }
        
        push();
      }
    });
  })
  .then(stream => /* 在这里处理stream，更新UI进度表示 */)
  .catch(error => console.error(error));