【chrome】F12开发者工具如何屏蔽接口,promise.all和promise.allSettled的区别实战验证

需求背景

有一个数据统计页面,含有7个指标,这7个指标分别来自不同的3个接口,现在我们想要合并其中2个,之前的3个接口的调用采用的是promise.all,但是promise.all数组中某一个请求失败,都会导致无法返回正确数据,导致7个指标都为默认值--

目标

1、合并3个变成2个接口

2、采用promise.allSettled解决某个接口失败,导致数据完全不返回问题

3、采用chrome浏览器的开发者工具Network,找到需要测试的接口右键出现的菜单中点击Block request URL对接口禁用,模拟接口请求失败,验证promise.allSettled的有效性

结论

1、开发者工具中的Block request URL可以方便的进行模拟接口失败情景

2、promise.allSettled确实可以做到避免某个接口失败,导致数据全部无法返回的问题

相关推荐
时光不负努力6 小时前
TS 常用工具类型
前端·javascript·typescript
Hilaku6 小时前
我会如何考核一个在简历里大谈 AI 提效的高级前端?
前端·javascript·面试
进击的尘埃6 小时前
Vue3 中 emit 能 await 吗?事件机制里的异步陷阱
javascript
青青家的小灰灰6 小时前
React 反模式(Anti-Patterns)排查手册:从性能杀手到逻辑陷阱
前端·javascript·react.js
青青家的小灰灰6 小时前
告别 Prop Drilling:Context API 的陷阱、Reducer 模式与原子化状态库原理
前端·javascript·react.js
进击的尘埃6 小时前
CSS 变量 + 主题切换:从 CSS-in-JS 回归原生方案的实践之路
javascript
csdn飘逸飘逸6 小时前
Autojs基础-按键模拟(keys)
javascript
wuhen_n6 小时前
Suspense:异步组件加载机制
前端·javascript·vue.js
wuhen_n6 小时前
Teleport:渲染到任意DOM节点
前端·javascript·vue.js
进击的尘埃6 小时前
组合式函数的设计模式:如何写出真正可复用的 Vue3 Composables
javascript