在前端开发中，有时我们需要向后端请求数据或发送一些操作指令。但是出现网络问题或者服务器响应过慢可能会导致请求超时，这时候我们需要对此进行处理以提高用户体验。
如何处理超时请求？
1. 设置超时时间
通过设置一个合适的超时时间，可以避免请求一直挂起而影响用户体验。可以使用 setTimeout 函数来实现定时器，并在规定时间内检查请求是否完成。
-- -------------------- ---- -------
----- ------- - ----- -- -------
----- ----- - ------------- -- -
--------------------
-- ---------
----------
-------------- -- -
-------------------- -- -----------
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
-------------------
---在以上代码中，我们首先定义了一个超时时间为5秒的变量 timeout，然后使用 setTimeout 函数创建了一个定时器，并在规定时间内检查请求是否完成。如果请求在规定时间内返回结果，则使用 clearTimeout 函数清除定时器，否则输出 '请求超时'。
2. 使用 Promise.race
使用 Promise.race 可以同时执行多个 Promise 实例，并返回最先完成的 Promise 实例的结果或错误信息。通过将一个 Promise 实例作为超时检测器，可以在一定时间内判断请求是否超时。
-- -------------------- ---- -------
----- -------------- - --- ----------------- ------- -- -
------------- -- -
---------------
-- ------
---
------------------------- ----------------
-------------- -- -
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
-------------------
---在以上代码中，我们首先创建了一个 Promise 实例 timeoutPromise，用于检测请求是否超时。在其中使用 setTimeout 函数创建了一个定时器，并在规定时间内将 Promise 实例的状态变更为 "reject"，并传递 '请求超时' 的错误信息。然后使用 Promise.race 函数同时执行 fetch(url) 和 timeoutPromise 两个 Promise 实例，并返回最先完成的实例的结果或错误信息。
如何优化用户体验？
除了处理超时请求外，我们还可以通过其他方式提高用户体验。
1. 显示加载动画
当用户发出请求时，可以在页面上显示一个加载动画，提示用户正在进行操作。如果请求完成，则隐藏加载动画，并展示请求结果。否则，在合适的时机提示用户请求超时。
<div id="loading"> <img src="loading.gif" alt="loading" /> </div> <div id="content"></div>
-- -------------------- ---- ------- -------- - -------- ----- - ------------- - -------- ------ - ------------- - -------- ----- -
-- -------------------- ---- -------
----- ------- - -----------------------------------
----- ------- - -----------------------------------
------------------------------ -- ------
----------
-------------- -- -
--------------------------------- -- ------
--------------------------------- -- ------
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
-------------------
---在以上代码中，我们首先创建了一个带有加载动画和请求结果的 HTML 结构，并定义了相应的 CSS 样式。然后使用 JavaScript 获取 loading 和 content 元素，并在合适的时机添加或删除对应的 CSS 类名，从而实现显示或隐藏元素。
2. 自动重试
当请求失败时，可以自动进行一定次数的重试操作以提高请求成功率。可以通过封装一个带有自动重试功能的请求函数来实现。
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/8112) ，转载请注明来源 [https://www.javascriptcn.com/post/8112](https://www.javascriptcn.com/post/8112)