在 observable 完成后要执行的操作完成后如何执行操作？答案

【问题标题】：How do I perform an operation after completion of the action to be performed after the observable is complete?在 observable 完成后要执行的操作完成后如何执行操作？
【发布时间】：2017-05-17 03:46:29
【问题描述】：

我需要对 observable 中的 observable 结果执行操作。

Component

checkIn(room: Room)
{
    this.roomService.checkIn(room.number).subscribe(
        response => {
           this.checkInResponse = response;
           // other codes

           this.getRooms();

           // Perform the following line of code after getRooms() is complete, i.e. this.rooms has been reloaded. Right now, it executes instantaneously, i.e. before this.getRooms() is complete.
           this.setRoom = this.roomFromNumber(room.number);
        },
        error => {
           console.log(error);
        }
    );
 }

getRooms() {
    this.roomService.getRooms().subscribe(
      response => {
        this.rooms = response;
      },
      error => {
        console.log(error);
      }
    );
}

Service

getRooms(): Observable <any> {
    return this.http.get('http://localhost:8000/api/rooms?token=' + this.token).map(
        (response: Response) => {
            return response.json().rooms;
        });
 }

checkIn(roomNumber: number) {
    return this.http.post('http://localhost:8000/api/room/checkIn?token=' + this.token,
    {
        number: roomNumber
    },
    {
      headers: new Headers({
                'Content-Type' : 'application/json',
                'X-Requested-With' : 'XMLHttpRequest',
      })
    });
}

上面代码中的问题是this.setRoom = this.roomFromNumber(room.number);在this.getRooms()之前执行。我需要在 getRooms() 完成后执行以下代码行，即 this.rooms 已重新加载。

我可以简单地执行以下操作，在执行代码之前等待两秒钟，如果 observable 在两秒钟内发生，则可以正常工作；这绝对不是正确的方法。

setTimeout(() => this.setRoom = this.roomFromNumber(room.number), 2000);

【问题讨论】：

标签： angular asynchronous observable

【解决方案1】：

你可以这样做。

checkIn(room: Room)
{
    this.roomService.checkIn(room.number).subscribe(
        response => {
           this.checkInResponse = response;
           // other codes

           this.getRooms(() => { this.setRoom = this.roomFromNumber(room.number); });.

        },
        error => {
           console.log(error);
        }
    );
}

getRooms(completeAction: any) {
    this.roomService.getRooms().subscribe(
      response => {
        this.rooms = response;
      },
      error => {
        console.log(error);
      },
      () => { completeAction(); }
    );
}

【讨论】：

我让它以另一种方式工作。我会试试这个，让你知道它是否有效。非常感谢。

【解决方案2】：

checkIn(room: Room)
{
    this.roomService.checkIn(room.number).subscribe(
        (response) => {
           this.checkInResponse = response;
           // other codes

           this.getRooms().subscribe(
           (data) => {
               // executes after getRooms() has completed execution
               this.setRoom = this.roomFromNumber(room.number);
           },
           (error) => {
               console.log(error);
           });
        },
        (error) => {
           console.log(error);
        }
    );
}

getRooms() {
    return this.roomService.getRooms().map(
           (response) => {
                return response
            }
           ).catch((error) => {
               return Observable.throw(error)
          });
}

【讨论】：