Angular RXJS：链式API调用中首个响应值传入第三请求时未定义问题

需求与代码实现 #

原TypeScript代码：

registerUser(){
  let payload={
    "Id": 0,
    "UserId": 0,
    "AccountName": this.formData?.companyName,
    "Address": this.formData?.address,
    "Email": this.formData?.email,
    "MobileNumber": this.formData?.contactNumber,
    "UserName": this.formData?.userId,
    "Password": this.formData?.password,
  }
  this.registerService.registerUserFormData(payload) // 保存账户数据
  .pipe(
    tap((resp:any)=>{
      this.accountData=resp.data // 用类变量存储首个API响应
    }),
    switchMap((response1:any)=>{ 
      const formData = new FormData();
      formData.append('file', this.registerService.companyRegistrationDocument);
      return this.registerService.uploadFile(formData)
    }),
    switchMap( (response2:any) =>{
      let payload=[
        {
          "Id":0,
          "AccountId": this.accountData.id,
          "Name": response2.data.name
        }]
      console.log(payload) // 控制台打印时AccountId有值
      return this.registerService.uploadDocumentData(payload) // 发送请求时AccountId变为undefined
    }),
  ).subscribe({
    next:(responseMain)=>{
      console.log(responseMain)
      alert("账户注册成功")
    },
    error:()=>{
      alert("操作失败，请重试")
    }
  })
}

需求说明 #

需要依次完成三个API调用：

• 调用API保存新账户数据
• 调用API上传文档
• 第三个API请求需携带前两个API的响应数据

问题描述 #

第三个API请求中，首个API返回的AccountId在控制台打印时已定义，但实际发送请求时变为undefined；第二个API的响应数据正常。同时需后续支持多文件上传，需复用首个API的响应数据。

问题根源 #

你当前通过类成员变量this.accountData存储首个API的响应数据，存在两个核心隐患：

1. 异步上下文冲突：若用户多次触发registerUser方法，this.accountData会被新请求结果覆盖，导致后续流使用错误数据。
2. RxJS流调度时机问题：虽然tap操作中已赋值，但在某些调度场景下，第三个switchMap执行时，this.accountData的赋值可能未完成或被意外修改，导致id变为undefined。

修复方案：通过RxJS流传递数据（弃用类变量） #

将首个API的响应数据直接在流中传递，避免依赖类变量，确保数据在流生命周期内可靠可用：

registerUser(){
  let payload={
    "Id": 0,
    "UserId": 0,
    "AccountName": this.formData?.companyName,
    "Address": this.formData?.address,
    "Email": this.formData?.email,
    "MobileNumber": this.formData?.contactNumber,
    "UserName": this.formData?.userId,
    "Password": this.formData?.password,
  }
  this.registerService.registerUserFormData(payload)
  .pipe(
    // 直接将账户数据传递到下一个操作，不依赖类变量
    switchMap((accountResp: any) => {
      const formData = new FormData();
      formData.append('file', this.registerService.companyRegistrationDocument);
      // 上传文件时，将账户数据与文件响应一起返回
      return this.registerService.uploadFile(formData).pipe(
        map(uploadResp => ({
          accountData: accountResp.data,
          uploadData: uploadResp.data
        }))
      );
    }),
    switchMap(({ accountData, uploadData }) => {
      let payload=[
        {
          "Id":0,
          "AccountId": accountData.id, // 直接使用流中传递的账户数据
          "Name": uploadData.name
        }]
      console.log(payload);
      return this.registerService.uploadDocumentData(payload);
    })
  ).subscribe({
    next:(responseMain)=>{
      console.log(responseMain)
      alert("账户注册成功")
    },
    error:()=>{
      alert("操作失败，请重试")
    }
  })
}

额外排查方向 #

若修复后仍有问题，建议检查：

• 首个API的响应字段：确认返回的是id（小写）还是Id（大写），避免大小写不匹配导致取值为undefined。
• 网络请求日志：在浏览器开发者工具Network面板中，查看第三个API的请求载荷，确认实际发送的数据是否符合预期。
• 类变量的其他修改：检查代码中是否有其他地方修改了this.accountData，导致流执行时数据被覆盖。

多文件上传适配方案 #

后续支持多文件上传时，可通过forkJoin并行上传多个文件，同时保留首个API的响应数据：

registerUser(){
  let payload={
    // 同之前的账户数据结构
  }
  this.registerService.registerUserFormData(payload)
  .pipe(
    switchMap((accountResp: any) => {
      // 假设多文件存储在companyDocuments数组中
      const uploadObservables = this.registerService.companyDocuments.map(file => {
        const formData = new FormData();
        formData.append('file', file);
        return this.registerService.uploadFile(formData);
      });
      // 并行上传所有文件，同时传递账户数据
      return forkJoin(uploadObservables).pipe(
        map(uploadResps => ({
          accountData: accountResp.data,
          uploadDatas: uploadResps.map(resp => resp.data)
        }))
      );
    }),
    switchMap(({ accountData, uploadDatas }) => {
      // 生成多个文档记录的载荷
      const payload = uploadDatas.map(data => ({
        "Id":0,
        "AccountId": accountData.id,
        "Name": data.name
      }));
      return this.registerService.uploadDocumentData(payload);
    })
  ).subscribe({
    next:(responseMain)=>{
      console.log(responseMain)
      alert("账户注册成功")
    },
    error:()=>{
      alert("操作失败，请重试")
    }
  })
}

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