Angular异步请求异常：仅获Campaign数据，Userc/Company数据undefined

嘿，我一眼就看到你代码里的两个关键问题，这就是为啥只有Campaign数据能正常获取的原因！咱们一步步来拆解和修复：

核心问题1：异步操作的执行顺序错误 #

this.campaignService.getOneCampaign(id)是异步的（返回Promise），但你后面的if (this.campaign)判断是同步执行的——这时候Promise还没完成，this.campaign还是undefined，所以那两个依赖它的请求根本没机会触发。

核心问题2：条件判断用了赋值运算符而非比较运算符 #

你写的if (campaign.camptype = "VIDEO")是把字符串"VIDEO"赋值给campaign.camptype，而不是判断它是否等于"VIDEO"。这种写法会导致逻辑完全错误，而且不管原数值是什么，条件都会被判定为true（因为赋值后的非空字符串是真值）。

修复后的代码方案 #

我给你两种修复思路，选你习惯的风格就行：

方案1：用async/await让代码更易读 #

这种写法把异步代码变得像同步代码一样直观，非常适合处理这种依赖顺序的场景：

async ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  try {
    // 先确保拿到Campaign数据
    this.campaign = await this.campaignService.getOneCampaign(id);

    // 修正条件判断为严格相等===
    if (this.campaign.camptype === "VIDEO") {
      this.unitcostvid = (Math.round(this.campaign.unitcost * this.campaign.durationvid * 10000)) / 10000;
      this.totalcost = this.unitcostvid * this.campaign.nbuser;
    } else if (this.campaign.camptype === "MAIL") {
      this.unitcostvid = this.campaign.unitcost;
      this.totalcost = this.unitcostvid * this.campaign.nbuser;
    }

    if (this.campaign.status === "EA") {
      this.eacamp = true;
    }

    // 现在Campaign已就绪，并行发起另外两个请求（效率更高）
    [this.userc, this.company] = await Promise.all([
      this.usercService.getSingleUserc(this.campaign.usercidvalidate),
      this.companyService.getCompanybycoid(this.campaign.coid)
    ]);
  } catch (error) {
    // 别忘了处理错误，避免静默失败
    console.error('加载数据时出错:', error);
  }
}

方案2：用Promise链式调用（保持原代码风格） #

如果你更习惯用.then()的写法，也可以把依赖操作放到第一个Promise的回调里，还能通过Promise.all并行请求提高效率：

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  this.campaignService.getOneCampaign(id)
    .then((campaign: Campaign) => {
      this.campaign = campaign;

      // 修正条件判断逻辑
      if (campaign.camptype === "VIDEO") {
        this.unitcostvid = (Math.round(this.campaign.unitcost * this.campaign.durationvid * 10000)) / 10000;
        this.totalcost = this.unitcostvid * this.campaign.nbuser;
      } else if (campaign.camptype === "MAIL") {
        this.unitcostvid = this.campaign.unitcost;
        this.totalcost = this.unitcostvid * this.campaign.nbuser;
      }

      if (campaign.status === "EA") {
        this.eacamp = true;
      }

      // 并行发起Userc和Company请求，不用等一个完成再发另一个
      return Promise.all([
        this.usercService.getSingleUserc(campaign.usercidvalidate),
        this.companyService.getCompanybycoid(campaign.coid)
      ]);
    })
    .then(([userc, company]) => {
      this.userc = userc;
      this.company = company;
    })
    .catch(error => {
      console.error('数据加载失败:', error);
    });
}

关键修复点说明 #

1. 异步顺序控制：把依赖Campaign的请求放到它的Promise回调里，确保只有当Campaign数据就绪后才执行后续请求。
2. 条件判断修正：把=改成===（严格相等），避免赋值操作导致的逻辑错误，这也是TypeScript的最佳实践。
3. 并行请求优化：用Promise.all同时发起Userc和Company的请求，比顺序请求节省时间，因为这两个请求互相不依赖。
4. 错误处理：添加try/catch或.catch()捕获异步操作的错误，避免程序静默失败难以排查。

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