在前端开发中，我们常常需要向服务器请求数据。使用 fetch API 可以方便地进行网络请求。但是，当我们发送请求时，用户可能会感觉页面长时间没有响应或者看不到请求的进度。为了解决这个问题，我们可以加入进度指示器来展现请求的进度。
使用 fetch API
在介绍如何添加进度指示器之前，让我们快速回顾一下 fetch API 的使用。我们通常会使用以下代码来发送一个 GET 请求：
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error))
这里先通过 fetch(url) 发送 GET 请求，然后调用 .then() 处理响应结果。其中，第一个 .then() 将响应结果转换为 JSON 格式并返回，第二个 .then() 则将 JSON 数据输出到控制台。如果请求失败，则会调用 .catch() 处理错误。
添加进度指示器
我们可以使用 fetch 的 Body 对象上的 body.getReader() 方法获取响应体 Reader。
fetch(url).then(res => {
const reader = res.body.getReader()
})将 reader 用于逐步读取响应体数据。在读取响应体数据时，我们可以通过 progress 事件监听请求的进度:
-- -------------------- ---- -------
----------
--------- -- -
----- ------ - --------------------
----- ------------- - ---------------------------------
--- -------------- - -
--------------------------- --------------------- -
-- ------------- -
------------------ ----------
------
-
-------------- -- -------------------
----- -------- - -------------- - -------------
---------------------- ------------------------
------ ---------------------------------
--
--这里我们使用了 Content-Length 头部信息来获取响应体的长度，通过 receivedLength 来记录已接收数据量。在读取每一块数据时，更新 receivedLength 并计算出请求的百分比，最后输出进度信息到控制台。
实际应用
在实际应用中，我们通常需要将进度指示器展现给用户。下面是一个简单的例子：
-- -------------------- ---- -------
----- ----------- - ---------------------------------------
----------
--------- -- -
----- ------ - --------------------
----- ------------- - ---------------------------------
--- -------------- - -
--------------------------- --------------------- -
-- ------------- -
----------------------- - ------
--------------------- - -----------
------
-
-------------- -- -------------------
----- -------- - -------------- - -------------
----------------------- - ----------- - ------
--------------------- - ------------ - ------------------
------ ---------------------------------
--
--在这个例子中，我们首先获取到 .progress-bar 元素，然后在读取每一块数据时，更新进度条的宽度和文本内容。当请求完成时，我们将进度条填满并显示完成信息。
总结
通过添加进度指示器，我们可以让用户更好地了解网络请求的进度，并提高用户体验。在使用 fetch API 时，我们可以通过获取响应体 Reader 和监听 progress 事件来实现进度指示器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26703