如何在.map中使用request.get请求返回的图片Base64转换结果

原有代码存在两个核心问题，导致无法正确获取并赋值Base64转码结果：

• convertUrlToBase64 函数未正确返回异步执行结果：request.get 传入回调时返回值不是标准Promise，外层await无法捕获回调内的return值；且函数写死了固定图片地址，没有接收动态图片URL的入参，无法适配不同图片的转码需求。
• mapUriToBase64 是同步函数，但URL转Base64依赖网络请求，属于异步操作，同步遍历无法拿到异步返回值，需要配合async/await和Promise.all等待所有转码任务执行完成。

修正后代码 #

首先重构转码函数，将其包装为标准Promise，增加动态URL入参和错误处理；再改造遍历函数为异步函数，等待所有图片转码完成后再组装返回数据：

public async convertUrlToBase64(imageUrl: string): Promise<string> {
  const request = require('request').defaults({ encoding: null });
  return new Promise((resolve, reject) => {
    request.get(
      imageUrl,
      function (
        error: any,
        response: { statusCode: number; headers: { [x: string]: string } },
        body: ArrayBuffer | SharedArrayBuffer,
      ) {
        if (error || response.statusCode !== 200) {
          reject(error || new Error(`图片请求失败，状态码：${response?.statusCode || '未知'}`));
          return;
        }
        const base64Result = 'data:' + response.headers['content-type'] + ';base64,' + Buffer.from(body).toString('base64');
        resolve(base64Result);
      },
    );
  });
}

public async mapUriToBase64(note: any): Promise<any> {
  const processedImages = await Promise.all(
    note.images.map(async (image: File & { uri: string }) => {
      const base64Uri = await this.convertUrlToBase64(image.uri);
      return {
        ...image,
        uri: base64Uri,
      };
    })
  );

  return {
    ...note,
    images: processedImages,
  };
}

调用注意 #

mapUriToBase64 改造后为异步函数，调用时需要使用await等待执行结果：

// 调用示例
const processedNote = await this.mapUriToBase64(originalNoteData);

注：request库已停止官方维护，生产环境使用可以替换为Node.js 18+内置的fetch API、axios等仍在持续维护的请求库，替换时保持转码函数的Promise返回逻辑即可。

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