如何在Angular中使用async/await等待上传完成后再执行数据库保存逻辑

问题根源 #

你当前代码无法实现需求的核心原因是 await this.filesUploaded.push(selectedFiles[i]) 存在逻辑错误：数组的push方法是同步操作，返回值为数组更新后的长度而非Promise，await在这里完全起不到等待图片上传请求完成的作用，上传逻辑实际未被等待就提前返回了方法，导致DB写入逻辑提前执行。 #

修复方案 #

首先要保证每个文件的上传逻辑返回标准Promise（成功时resolve，失败时reject，假设你封装的单文件上传方法为this.uploadFile(file)），再通过以下两种方式改造上传方法：

方案1：串行上传（按顺序逐个上传文件） #

async uploadTrainingModule(selectedFiles: any = this.files) {
  this.filesUploaded = [] // 清空历史上传结果，避免数据污染
  for (let i = 0; i < selectedFiles.length; i++) {
    // 等待单文件上传完成后再处理下一个
    const uploadRes = await this.uploadFile(selectedFiles[i])
    this.filesUploaded.push(uploadRes)
  }
  return
}

方案2：并行上传（所有文件同时上传，效率更高） #

async uploadTrainingModule(selectedFiles: any = this.files) {
  // 生成所有上传请求的Promise数组
  const uploadTasks = selectedFiles.map(file => this.uploadFile(file))
  // 等待全部上传请求完成，按顺序返回结果
  this.filesUploaded = await Promise.all(uploadTasks)
  return
}

调用逻辑改造 #

两种调用方式均可，推荐增加异常处理避免上传失败仍然写入DB的脏数据问题：

写法1：保留then调用 #

createTrainingModule() {
  this.uploadTrainingModule()
    .then(() => {
      // 所有图片上传完成，在此处执行DB写入逻辑
    })
    .catch(err => {
      // 处理上传失败场景，比如弹出错误提示
    })
}

写法2：async/await语法（可读性更强） #

async createTrainingModule() {
  try {
    await this.uploadTrainingModule()
    // 所有图片上传完成，在此处执行DB写入逻辑
  } catch (err) {
    // 处理上传失败场景
  }
}

注意事项 #

• 如果有上传失败重试、断点续传等需求，可以在单文件上传方法中额外封装对应逻辑
• 若需要支持部分上传失败就终止整体流程，直接在上传方法抛出错误即可，Promise.all会在任意一个请求失败时直接进入reject状态

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