在现代 Web 应用中，网络通信状态对于用户体验至关重要。当用户在等待页面加载或者等待网络请求响应时，展示一个清晰的状态信息可以避免用户焦虑和不必要的等待时间。在 ECMAScript 2019 中，引入了一些新的 API，可以更加方便地展示网络通信状态。本文将介绍这些 API，并提供示例代码和实际应用场景。
1. navigator.connection
在过去，我们通常使用 navigator.onLine 属性来判断用户是否已经连接到互联网。但是，这个属性只能告诉我们用户当前是否连接到互联网，而无法提供更加详细的网络状态信息。在 ECMAScript 2019 中，我们可以使用 navigator.connection 属性来获取更加详细的网络状态信息。
navigator.connection 属性返回一个 NetworkInformation 对象，该对象包含以下属性：
downlink：当前网络的下行带宽估计，单位为 Mbps。effectiveType：当前网络的速度类型，可能的取值为slow-2g、2g、3g、4g。rtt：当前网络的往返时延估计，单位为毫秒。saveData：用户是否启用了数据节省模式。
我们可以使用这些属性来更加清晰地展示用户的网络状态，例如：
----- ---------- - ---------------------
-- ------------ -
----- - --------- -------------- ---- -------- - - -----------
----------------------------------------------------- ---------------- -----
-- ---------- -
---------------------------
-
- ---- -
--------------------------
-2. navigator.sendBeacon()
在 Web 应用中，我们通常需要向服务器发送一些数据以记录用户行为或者统计数据。在过去，我们通常使用 AJAX 或者 Fetch API 来发送这些数据。但是，这些 API 都有一些缺点：
- 它们必须等待服务器响应才能完成请求。
- 如果用户关闭了页面，这些请求可能会被取消或者失败。
- 如果用户在发送请求时断网，这些请求也可能会失败。
在 ECMAScript 2019 中，我们可以使用 navigator.sendBeacon() 方法来解决这些问题。navigator.sendBeacon() 方法可以在后台异步发送数据，而不需要等待服务器响应。如果用户关闭了页面或者断网，这些请求也会在后台继续发送，不会被取消或者失败。
navigator.sendBeacon() 方法接受两个参数：要发送的数据和请求的地址。例如：
----- ---- - - ------- -------- ------ - -- ----- --- - ------- ------------------------- ----------------------
在实际应用中，我们可以使用 navigator.sendBeacon() 方法来记录用户行为或者统计数据，例如：
----- --- - -------- ------ -- - ----- ---- - - ------- ----- -- ----- --- - ------- ------------------------- ---------------------- -- ---------------------------------- -- -- - ------------ --- ---
3. AbortController 和 AbortSignal
在 Web 应用中，我们通常需要发送一些网络请求以获取数据或者执行操作。有时候，我们需要取消这些请求以避免不必要的网络流量或者避免出现不必要的错误。在 ECMAScript 2019 中，我们可以使用 AbortController 和 AbortSignal 来取消网络请求。
AbortController 是一个控制器对象，用于控制一个或多个网络请求。我们可以使用 AbortController 创建一个 AbortSignal 对象，然后将该对象传递给网络请求。当我们需要取消网络请求时，可以调用 AbortSignal.abort() 方法来取消请求。
例如，我们可以使用 AbortController 和 AbortSignal 来取消 Fetch API 请求：
----- ---------- - --- ------------------ ----- ------ - ------------------ -------------- - ------ -- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ---------------------- ------------- -- - ------------------- -- ------
在上面的示例中，我们创建了一个 AbortController 对象和一个 AbortSignal 对象，并将该对象传递给 Fetch API 请求。然后，我们使用 setTimeout() 方法在 5 秒钟后调用 AbortSignal.abort() 方法来取消请求。
总结
在 ECMAScript 2019 中，我们引入了一些新的 API，可以更加方便地展示网络通信状态、后台异步发送数据和取消网络请求。这些 API 可以帮助我们提高 Web 应用的用户体验和性能。在实际应用中，我们可以根据需要使用这些 API 来优化我们的应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66321397d3423812e4fb56b8