如何将Fetch回调代码转为Async/Await？解决Blob类型错误

原Promise形式代码 #

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest).then((response) => {
  console.log(response.type); // 默认返回basic
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});

你尝试的Async/Await代码（存在错误） #

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

const response = await fetch(myRequest)
  console.log(response.type); 
  const blob = await response.blob()
    const objectURL = URL.createObjectURL(blob); // -> 我哪里错了？
    myImage.src = objectURL;

执行时的错误提示 #

Argument of type 'Blob' is not assignable to parameter of type 'BlobPart[]'.
  Type 'Blob' is missing the following properties from type 'BlobPart[]': length, pop, push, concat, and 27 more

错误原因与修复方案 #

你的代码有两个关键问题：

1. await必须在async函数内使用：直接在全局作用域（非模块环境）或非async函数里用await是语法错误，会导致代码解析异常。
2. 缺少代码块包裹导致语法混乱：你没有用{}把await后续的代码包裹起来，JavaScript会把这些语句当成独立的代码行，破坏了逻辑结构，甚至让编译器误判URL.createObjectURL的参数类型（也就是你看到的类型错误）。

正确的转换代码 #

方式一：封装到async函数中（通用场景）

const myImage = document.querySelector('img');

async function loadImage() {
  const myRequest = new Request('flowers.jpg');
  // 等待fetch请求完成
  const response = await fetch(myRequest);
  console.log(response.type);
  // 等待blob转换完成
  const blob = await response.blob();
  // 创建对象URL并赋值给图片
  const objectURL = URL.createObjectURL(blob);
  myImage.src = objectURL;
}

// 调用函数触发图片加载
loadImage();

方式二：顶层await（ES模块环境）

如果你的代码是在ES模块中（比如script标签添加了type="module"），可以直接用顶层await，不需要包裹函数：

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');
const response = await fetch(myRequest);
console.log(response.type);
const blob = await response.blob();
const objectURL = URL.createObjectURL(blob);
myImage.src = objectURL;

修复后，代码逻辑和原Promise版本完全一致，同时解决了语法错误和类型误报问题。

内容的提问来源于stack exchange，提问作者Time Buy