Angular5，响应并订阅

Question

i have 2 calls to server that depends on each other like this

    this.service.fetchPoints(this.dateStart, this.dateEnd).subscribe(
        response => {
            this.points = response;
            do something .....
        }
    );

    this.service.fetchSchedule(this.points.date).subscribe(
        response => {
            this.schedule = response;
        }
    );

this.service is code like this:

fetchPoints(from:string, to:string) {
    return this.http.get(this.createUrl(`/api/congregations/fetch_points/${this.congregation.id}-${from}-${to}`));
}

second function also returns observable the easiest way to make dependency is to write it like this

      this.service.fetchPoints(this.dateStart, this.dateEnd).subscribe(
        response => {
            this.points = repsonse;
            this.service.fetchSchedule(this.points.date).subscribe(
                response => {
                    this.schedule = response;
                }
            );
        }
    );

but this looks ugly, is there a way to make it better?

Answer 1

You could convert your Observable to a Promise , but you will be acheving the same thing really.

import 'rxjs/add/operator/toPromise';

fetchPoints(from:string, to:string) {
    return this.http.get(this.createUrl(`/api/congregations/fetch_points/${this.congregation.id}-${from}-${to}`))
          .toPromise();
}

Service:

  this.service.fetchPoints(this.dateStart, this.dateEnd).then(
    response => {
        this.points = repsonse;
        this.service.fetchSchedule(this.points.date).then(
            response => {
                this.schedule = response;
            }
        );
    }
);

But the above does not really "tidy" much up, so what I would suggest is that you move the fetchSchedule into it's own method.

Also in the above code I noticed you are using the scoped variable response twice, that is quite confusing, so if you don't take any of my suggestions, I suggest that you change response into something like pointsResponse and scheduleResponse .

private getSchedule() {
    this.service.fetchSchedule(this.points.date).subscribe(
        response => {
            this.schedule = response;
        }
    );
}

Your code would then look like:

  this.service.fetchPoints(this.dateStart, this.dateEnd).subscribe(
    response => {
        this.points = repsonse;
            getSchedule();
        );
    }
);