在开发 PWA 应用时，我们通常需要与后端服务器进行数据交互。然而，由于网络状况的不稳定，我们无法保证每个请求都能够成功返回数据。网络请求超时是一种常见的问题，它会导致用户体验的恶化和应用性能的下降。本文将介绍如何在 PWA 应用中实现网络请求的超时处理，以提高用户体验。
为什么需要网络请求超时处理？
网络请求超时是指在等待服务器返回数据时，客户端等待时间超过了规定的最大时间，导致请求失败。网络请求超时发生的主要原因包括网络延迟、网络带宽不足、服务器负载过高等。对于用户而言，网络请求超时可能会导致：
- 应用反应变慢，影响用户体验；
- 用户不知道应用是否正在等待响应，进而误以为应用已经停止工作；
- 频繁发生网络请求超时可能让用户失去信心，并选择使用其他应用。
为了提供更好的用户体验，我们需要在 PWA 应用中实现网络请求超时处理，及时提示用户请求超时并给出相应的处理方案。
如何实现网络请求超时处理？
实现网络请求超时处理的方式有很多种，本文将介绍两种常用的方式：使用 AbortController 和使用 setTimeout 函数。
使用 AbortController
AbortController 是浏览器提供的一个 API，可以用来中止 Fetch 或 XMLHttpRequest 请求。当我们需要取消一个正在执行的请求时，可以使用 AbortController 通过调用 abort() 方法来取消该请求。AbortController 构造函数不需要任何参数。
以下是使用 AbortController 实现网络请求超时处理的示例代码：
const controller = new AbortController();
const signal = controller.signal;
const timeoutId = setTimeout(() => {
controller.abort();
}, 5000);
fetch(url, { signal }).then(response => {
clearTimeout(timeoutId);
// 处理响应结果
}).catch(error => {
clearTimeout(timeoutId);
if (error.name === 'AbortError') {
// 请求超时
} else {
// 其他错误
}
});上述代码中，我们首先创建了一个 AbortController 对象和一个 AbortSignal 对象 signal。然后，我们通过 setTimeout 函数设置了 5 秒的等待时间，如果请求在 5 秒内没有返回结果，则调用 abort() 方法取消该请求。最后，我们使用 Fetch API 发送了一个请求，传入 signal 作为 Fetch API 的选项，以便中止该请求。在请求成功响应后，我们清除了超时定时器。如果请求发生错误，我们检查错误的名称是否为 AbortError，如果是，则表示请求超时，如果不是，则表示其他错误。
使用 setTimeout 函数
除了使用 AbortController，我们还可以使用 setTimeout 函数来实现网络请求超时处理。使用 setTimeout 函数的方式相对较为简单，但注意不同浏览器的行为可能不同。
以下是使用 setTimeout 函数实现网络请求超时处理的示例代码：
let timedOut = false;
const timeoutId = setTimeout(() => {
timedOut = true;
}, 5000);
fetch(url).then(response => {
clearTimeout(timeoutId);
if (!timedOut) {
// 处理响应结果
} else {
// 请求超时
}
}).catch(error => {
clearTimeout(timeoutId);
// 其他错误
});上述代码中，我们使用了一个变量 timedOut 来记录请求是否已超时。我们通过 setTimeout 函数设置了 5 秒的等待时间，如果在 5 秒内没有得到响应，则将 timedOut 设置为 true。在请求成功响应后，我们检查 timedOut 是否为 false，如果为 false 则表示请求未超时。如果请求超时或发生其他错误，我们清除了超时定时器并进行相应的处理。
总结
PWA 应用的网络请求超时处理是保障用户体验的重要一步。本文介绍了使用 AbortController 和 setTimeout 函数两种方式来实现 PWA 应用的网络请求超时处理。无论你选择哪种方式，都应注意不同浏览器的兼容性和性能影响。我们希望本文对使用 PWA 开发的开发者们有所帮助，加强了对 PWA 应用的了解和应用的实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65912a56eb4cecbf2d663989