关于fetchImage()返回值及外部img变量类型的技术咨询

1. fetchImage() 函数的返回值 #

fetchImage 是一个 async 函数，它的返回值必然是一个 Promise 对象。

• 即便函数内部手动返回了一个 Promise 实例，async 函数的特性决定了它最终返回的依然是 Promise 对象（这里就是内部创建的那个 Promise）。这个 Promise 会在图片加载成功时，将 Image 实例作为 resolve 值返回；加载失败时则 reject 对应的错误信息。

2. 外部 img 常量的变量类型 #

函数外部的 img 是**Image 类型的实例**。

• 代码中使用 await 关键字调用 fetchImage，await 会等待目标 Promise 进入 resolved 状态，然后取出其 resolve 的值（也就是加载完成后的 Image 对象）赋值给 img，这也是后续可以直接读取 img.width 和 img.height 属性的原因。

代码验证示例 #

你可以通过以下代码直观验证类型：

// 验证 fetchImage 的返回值类型
console.log(fetchImage('test-url') instanceof Promise); // 输出 true

// 在异步上下文内验证外部 img 的类型
(async () => {
  const img = await fetchImage('https://covers.openlibrary.org/b/id/12547191-L.jpg');
  console.log(img instanceof Image); // 输出 true
})();

内容的提问来源于stack exchange，提问作者Kaiwen Xie