我的async函数调用后控制台同时显示pending与fulfilled状态

核心原因：async函数的返回特性与控制台的动态更新逻辑 #

• async函数调用后会立刻返回一个处于pending状态的Promise——因为函数内部的异步操作（比如await fetch）还未完成，此时控制台会先输出这个pending状态的Promise对象。
• 当函数内部所有await操作执行完毕、整个函数正常走完流程后，返回的Promise会切换为fulfilled状态。浏览器控制台会自动更新这条输出的状态，所以你会看到它从pending变为fulfilled，部分控制台会保留状态变化的痕迹，看起来像是“同时显示”两种状态。

结合你的代码具体分析 #

你的apiFetch函数执行流程：

1. 调用apiFetch()瞬间，函数直接返回pending状态的Promise，控制台先显示这个状态。
2. 随后await fetch发起网络请求，请求完成后解析响应JSON，接着创建图片元素并添加到页面。
3. 当所有异步、同步代码执行完毕，Promise状态更新为fulfilled，控制台同步更新显示最终状态。

直观验证方式 #

在控制台执行以下代码，可以清晰看到状态变化的过程：

const promise = apiFetch();
console.log('刚调用后的Promise状态：', promise); // 此时为pending
setTimeout(() => {
  console.log('一段时间后的Promise状态：', promise); // 此时为fulfilled
}, 2000);

内容的提问来源于stack exchange，提问作者Vishal Kacha