为何使用await时fetch外的document.write会覆盖Promise内内容？

首先要指出两段代码里的核心错误：finally方法没有传入回调函数，而是直接执行了document.write语句。这意味着document.write("promise resolved one way or another")会在调用finally的瞬间立即执行，完全不会等待fetch的Promise完成。这是理解两种行为差异的基础。

不使用await的场景 #

• 调用fetch后，Promise开始异步执行，但同步代码继续向下执行。
• 立即执行finally里的document.write，此时文档处于打开状态（同步脚本还在运行，页面未完成初始渲染），内容会追加到文档中。
• 紧接着执行外部的document.write("<br>code outside the fetch promise")，同样在文档打开状态下追加内容，最终两段文字都会保留，呈现追加效果。

使用await的场景 #

• 调用fetch后，await会暂停当前函数执行，等待fetch的Promise完成。但finally里的document.write依然会立即执行，此时文档处于打开状态，内容被写入并短暂显示。
• 浏览器在等待Promise完成的间隙，会完成页面初始渲染，此时文档变为关闭状态。
• 当fetch的Promise完成后，await恢复函数执行，继续执行后面的document.write。此时文档已关闭，根据浏览器规则，调用document.write会清空现有文档内容，重新打开新的文档流写入，因此之前的文字被覆盖。

补充：正确的finally用法 #

如果想让document.write在Promise完成后执行，必须给finally传入回调函数：

await fetch("https://catfact.ninja/fact")
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error))
  .finally(() => document.write("promise resolved one way or another"));

这样document.write会在Promise完成后再执行，但await场景下后续的document.write依然会覆盖内容，只是finally的内容会在Promise结束后才出现。

内容的提问来源于stack exchange，提问作者Jon Billingsley