Angular 16中Promise返回的body为何带有__zone_symbol__value属性？

核心问题 #

1. forEach不支持异步回调阻塞：你在serializeRequestBody里使用body.forEach(async (...) => {})时，forEach会直接遍历执行所有回调，不会等待异步操作完成，导致函数提前返回空的data对象。后续拿到的是未完成赋值的对象，或是Zone.js包装后的Promise对象，因此出现__zone_symbol__value属性（这是Zone.js对Promise包装后留下的内部属性，说明你拿到的是未解析的Promise，而非最终的Base64字符串）。
2. 函数未正确返回异步结果：serializeRequestBody未标记为async，也没有返回Promise，导致调用方的await无法等待异步操作完成。

修正后的代码 #

// 标记为async函数，返回Promise<any>
public async serializeRequestBody(body: FormData): Promise<any> {
  try {
    const data: any = {};
    // 将FormData转为entries数组，方便用Promise.all处理异步操作
    const entries = Array.from(body.entries());
    // 等待所有异步操作完成
    await Promise.all(entries.map(async ([key, value]) => {
      if (value instanceof File) {
        // 直接await获取base64，无需嵌套then
        const base64 = await this.fileToBase64(value);
        data[key] = base64;
      } else {
        data[key] = value;
      }
    }));
    return data;
  } catch (error) {
    console.error('Error serializing request body:', error);
    throw error;
  }
}

private async fileToBase64(file: File): Promise<string> {
  try {
    const reader = new FileReader();
    return new Promise<string>((resolve, reject) => {
      reader.readAsDataURL(file);
      reader.onload = () => {
        resolve(reader.result as string);
      };
      reader.onerror = (error) => {
        reject(error);
      };
    });
  } catch (error) {
    console.error('Error converting file to Base64:', error);
    throw error;
  }
}

关键修改点 #

• 替换forEach为Promise.all+map：map返回一组Promise，Promise.all会等待所有Promise完成，确保所有文件转Base64的操作结束后，才返回填充好的data对象。
• 标记serializeRequestBody为async函数：调用方的await this.idb.serializeRequestBody(item)能正确等待异步操作完成，拿到最终的data对象，不会再出现__zone_symbol__value属性。
• 简化异步逻辑：去掉嵌套的then，直接用await获取fileToBase64的结果，代码更清晰易读。

调用验证 #

你的调用代码const data = item instanceof FormData ? await this.idb.serializeRequestBody(item) : item;可保持不变，现在serializeRequestBody返回的是Promise，await会正确解析出最终的data对象，其中的File字段已转为Base64字符串，可直接用于img标签的src属性。

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