09｜接口指标：监听接口状态，收集页面接口异常数据

唐俊开

你好，我是三桥。
很多前端同学并不太重视接口异常情况的维护，反而把精力集中在当前的功能是否可用。但在实际的应用过程中，可能会出现各种不可预知的接口异常情况。如果没有做好充分的异常处理和维护工作，不仅会导致较差的用户体验，甚至影响整个 Web 应用的稳定性和可靠性。
因此，这节课我们会把目光放在第 5 节课提到的接口异常这个数据指标，重点学习在前端全链路中捕获请求异常的方法。相信通过这节课的学习，你就能掌握前端全链路的异常处理方案，同时还进一步提升你的前端技能和发现问题的能力。
请求接口封装的常见误区我们知道，前端有两种向服务器发起请求的方法。一种是使用 XMLHTTPRequest 对象，是早期浏览器的实现方案。另一种是使用 Fetch API，这个是 ES6 新增的特性。这节课，我选用的是 Fetch 来带你分析请求异常捕获的一系列问题。
我们先来看看两个常见的例子。
第一个例子，有些同学懂得 Fetch 是异步函数，并且有意识地在代码里添加了 trycatch 捕获异常，这样，在发生请求异常的时候，就能通过 Catch 捕获异常了。我们也能进行异常后的交互处理，比如提供信息来提醒用户。
let result;
try {
  result = await fetch(url, {
    body,
    method: 'POST',
    keepalive: true
  });
} catch (e) {
  console.log(e)
}
// 下面继续使用result结果处理业务

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

1. 前端开发中需要重视接口异常情况的维护，以确保用户体验和应用稳定性。 2. 监听请求异常的核心目的是发现请求异常的状态，需要支持监听Fetch和向下兼容支持XMLHttpRequest。 3. 在技术层面，需要关注请求的HTTP状态码是否正常、请求是否超时以及请求是否被中断。 4. HTTP状态码的不同范围对应不同的日志级别，如成功响应、信息响应、重定向响应和错误响应。 5. 在处理请求中断时，需要使用AbortController对象来配合Fetch对象实现捕获被中断的请求。 6. 封装Fetch函数时需要注意避免业务耦合，以及考虑多项目维护的情况下的代码封装模式。 7. 请求超时需要进行监控，可以利用AbortController对象的功能结合Promise来实现超时中止的请求。 8. 通过拦截和改造Fetch API或XMLHttpRequest对象的方法，实现全局的接口请求监听。 9. 在设计监听机制时，应遵循不耦合业务和向下兼容的原则，以实现全链路监控的通用性和覆盖面更广。 10. 下节课将继续学习捕获前端资源和脚本错误异常信息的方法。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《前端全链路优化实战课》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(1)

最新
精选

westfall
现在基本上都是 axios 一把梭了
2024-05-08归属地：上海



收起评论