Angular 2中finish parameter不生效，使用subscribe处理API逻辑遇问题

嘿，我一眼就看出问题所在啦！你这里的核心问题是把Observable.subscribe的回调参数搞混了，导致你以为的"finish"逻辑根本没在正确的时机执行。

先理清Subscribe的三个回调参数 #

Angular的subscribe方法接收三个可选参数，顺序是固定的：

• 第一个：next回调 → API请求成功返回数据时执行（就是你现在处理resp的部分）
• 第二个：error回调 → API请求失败（比如网络错误、后端报错）时执行（你现在把displayClockDetail()放在了这里，只有出错才会跑！）
• 第三个：complete回调 → 无论请求成功还是失败，只要请求完成（结束）就会执行，这才是你要的"finish"逻辑

修正你的代码 #

把需要在请求完成后执行的逻辑放到第三个回调参数里，同时建议你先清空events数组避免重复添加，修正后的代码如下：

this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM')).subscribe(
  // 第一个回调：next（成功获取数据）
  resp => {
    this.agendaData = resp;
    // 先清空events，防止多次请求重复添加
    this.events = [];
    for (let item of resp) {
      if (item.schedule) {
        for (let sched of item.schedule) {
          this.events.push({
            'start': new Date(moment(item.date).format('YYYY-MM-DD')),
            'title': sched.title
          });
        }
      }
    }
  },
  // 第二个回调：error（请求失败）
  (err) => {
    console.log('请求出错了:', err);
  },
  // 第三个回调：complete（请求完成，无论成败）
  () => {
    console.log('请求完成，执行finish逻辑');
    this.displayClockDetail();
  }
);

更优雅的方式：使用finalize操作符 #

如果你想让某些逻辑必须在请求结束后执行（不管成功失败），推荐用RxJS的finalize操作符，它会在Observable完成或出错时都触发，代码结构更清晰：

import { finalize } from 'rxjs/operators';

// ...

this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM'))
  .pipe(
    finalize(() => {
      console.log('请求完成，执行finish逻辑');
      this.displayClockDetail();
    })
  )
  .subscribe(
    resp => {
      this.agendaData = resp;
      this.events = [];
      for (let item of resp) {
        if (item.schedule) {
          for (let sched of item.schedule) {
            this.events.push({
              'start': new Date(moment(item.date).format('YYYY-MM-DD')),
              'title': sched.title
            });
          }
        }
      }
    },
    (err) => {
      console.log('请求出错了:', err);
    }
  );

额外提醒 #

• 如果你只需要在请求成功后执行finish逻辑，那直接把this.displayClockDetail()放到next回调的末尾就可以了，不用专门用complete或finalize。
• 处理events数组时记得先清空，不然每次调用接口都会往里面加新数据，导致重复渲染事件。

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