Ctrl + S 会中断异步请求

今天发现一个问题，我有个Ctrl + S的保存快捷键，但快速按下两次后，Axios就会抛出 Request aborted 的错误， 同时网页弹出了自身的网页保存， 但接口却又只调用了一次，查找后发现我在保存loading=true状态时，没有调用e.preventDefault()，再我加上这个后发现问题好了。

我对为什么会这样产生了好奇，于是去别的地方再试了下Ctrl + S，列表搜索的瞬间按下Ctrl + S， 也会抛这个错。其他网页也试了个遍，发现都有这个问题，下面的ds的解释。

在网页开发中，当接口请求开始的瞬间按下 Ctrl + S（保存网页快捷键）导致接口请求被阻止，这是由于浏览器的页面生命周期行为和资源加载策略决定的。以下是具体原因和机制：

---

1。 浏览器中断页面活动

• 保存操作优先级：当按下 Ctrl + S 时，浏览器会立即触发保存当前页面的操作（如下载 HTML/CSS/JS 等资源）。这是一个同步任务，会中断所有正在进行的异步请求（包括 AJAX/Fetch 请求）。
• 页面冻结：浏览器在保存页面时，会临时冻结页面的脚本执行和网络活动，以确保保存的资源状态一致。这会导致尚未完成的请求被取消。

---

2。 请求被标记为 “Aborted”

• 在开发者工具的 Network 面板中，此类请求通常显示为 (canceled) 或 Status: Aborted。
• 根本原因：浏览器底层（如 Chromium 的 Blink 引擎）会强制终止所有未完成的网络请求，以防止保存过程中数据不一致。

---

3。 JavaScript 单线程模型

• 浏览器中 JavaScript 是单线程运行的。当 Ctrl + S 触发浏览器的保存操作时，它会占用主线程，导致：
  • 事件循环（Event Loop）被阻塞。
  • 正在发送的请求（例如 XMLHttpRequest.send() 或 fetch()）失去执行资源，被迫中止。

---