Angular/TypeScript无法访问Promise then/catch中设置的值求助

问题根源 #

你的代码存在两个核心问题：

1. 异步时序问题：uploadChunk是异步操作，for循环会快速发起所有请求，但console.log(error)在所有异步请求完成前就执行了，此时catch块还未触发，自然拿不到错误值。
2. 变量作用域冲突：catch的参数名error和外部声明的error变量同名，导致内部赋值的是局部参数，而非外部变量，外部的error始终未被修改。

解决方案 #

方案一：串行上传（依次处理每个分块）

将uploadFile改为异步函数，用try/catch包裹每个分块的上传逻辑，确保等待当前分块上传完成后再处理下一个，同时修复变量名冲突：

async uploadFile() {
  let id;
  let error;
  // 用for...of遍历分块数组，避免for...in遍历键的问题
  for(const chunk of chunks) {
    try {
      const result = await this.uploadChunk(chunk);
      id = result.id;
    } catch(err) {
      error = err;
      console.log(error); // 正常打印后端返回的错误
      break; // 可选：遇到错误时停止后续上传
    }
  }

  console.log(error); // 现在能正确获取捕获到的错误
}

async uploadChunk(chunk) {
  // 注意传入当前chunk的数据，原代码的chunkData需对应修改
  return await lastValueFrom(this.http.post(chunk));
}

方案二：并行上传（同时处理所有分块）

如果需要同时上传所有分块，可使用Promise.allSettled来等待所有请求完成，并收集结果中的错误：

async uploadFile() {
  let id;
  let error;
  // 为每个分块创建上传Promise
  const uploadPromises = chunks.map(chunk => this.uploadChunk(chunk));
  // 等待所有Promise完成（无论成功或失败）
  const results = await Promise.allSettled(uploadPromises);

  for(const result of results) {
    if(result.status === 'fulfilled') {
      id = result.value.id;
    } else {
      error = result.reason;
      console.log(error);
      // 可根据需求决定是否处理剩余结果
    }
  }

  console.log(error); // 能获取到捕获的错误
}

async uploadChunk(chunk) {
  return await lastValueFrom(this.http.post(chunk));
}

关键说明 #

• 串行上传适合对分块顺序有要求的场景，或者希望遇到错误立即终止的情况；
• 并行上传效率更高，但要注意后端是否支持同时接收多个分块请求；
• 无论哪种方案，都要确保异步操作完成后再访问error变量，同时避免变量名冲突导致的赋值失效。

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