Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
782 views
in Technique[技术] by (71.8m points)

angular - How do I force a refresh on an Observable service in Angular2?

In ngOnInit, my component obtains a list of users like so:

this.userService.getUsers().subscribe(users => {
    this.users = users;
});

And the implementation of userService.getUsers() looks like this:

getUsers() : Observable<UserModel[]> {
    return this.http.get('http://localhost:3000/api/user')
                    .map((res: Response) => <UserModel[]>res.json().result)
                    .catch((error: any) => Observable.throw(error.json().error || 'Internal error occurred'));
}

Now, in another component, I have a form that can create a new user. The problem is that when I use that second component to create a user, the first component doesn't know that it should make a new GET request to the backend to refresh its view of users. How can I tell it to do so?

I know that ideally I'd want to skip that extra HTTP GET request, and simply append the data the client already has from when it made the POST to insert the data, but I'm wondering how it'd be done in the case where that's not possible for whatever reason.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

In order for an observable to be able to provide values after initial Http observable was completed, it can be provided by RxJS subject. Since caching behaviour is desirable, ReplaySubject fits the case.

It should be something like

class UserService {
  private usersSubject: Subject;
  private usersRequest: Observable;
  private usersSubscription: Subscription;

  constructor(private http: Http) {
    this.usersSubject = new ReplaySubject(1);
  }

  getUsers(refresh: boolean = false) {
    if (refresh || !this.usersRequest) {
      this.usersRequest = this.http.get(...).map(res => res.json().result);

      this.usersRequest.subscribe(
        result => this.usersSubject.next(result),
        err => this.usersSubject.error(err)
      );
    }

    return this.usersSubject.asObservable();
  }
  onDestroy() {
    this.usersSubscription.unsubscribe();
  }
}

Since the subject already exists, a new user can be pushed without updating the list from server:

this.getUsers().take(1).subscribe(users => 
  this.usersSubject.next([...users, newUser])
)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...