Angular Observables vs Promise CRUD und erfrischende Daten

Question

Ich habe ein paar Fragen in Bezug auf eckige 2/4 Muster für einfache Crud-Anwendung. Die meisten der Beispiele, die ich gesehen habe, sehe ich nicht, wie die Daten nach dem Einfügen/Aktualisieren, etc. aktualisiert werden.

Ich bin ein bisschen neu mit Observables, aber verstehen die meisten der Muster mit Ausnahme mit erfrischenden Daten nach einem Einfügen/Aktualisieren/Löschen. Kann jemand die beste Methode zum Aktualisieren von Daten erklären und brauche ich wirklich Observables anstelle von Versprechungen? Wird akzeptiert, Versprechen zu halten?

Wie mache ich Folgendes mit Observables?

users.service

insertPromise(user : User) 
{ 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    let url = this.baseUrl; 

    return this.http.post(url, JSON.stringify(user),options)   
      .do(data=>console.log(JSON.stringify(data))) 
      .toPromise() 
      .then(this.extractPromiseData)   
      .catch(this.handleError); 
} 

insertObservable(user : User) { 

    this.usersService.insert(user) 
     .subscribe(
     resp => { 

     console.log(resp); 
     }, 
     error => this.errorMessage = <any>error); 
    } 

Benutzer-list.component (contains nach Einsatz aufzufrischen)

insert(user: User) 
{ 
    this.usersService.insertPromise(user) 
     .then(result=>console.log(result)) 
     .then(
      ()=>this.usersService.getAllUsers() 
      .then(
      users=> 

      this.users = users 

      ) 
      .catch(error=>console.log(error))   
      ) 
     .catch(error=>console.log(error)); 
} 

insertObservable(user: User) 
    { 

    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    let url = this.baseUrl; 

    return this.http.post(url, JSON.stringify(user),options) 
      .map((response: Response) => response.json()) 
      .do(data=>console.log(JSON.stringify(data))) 
      .catch(this.handleError); 
    } 

Answer 1

Es hängt von der jeweiligen Implementierung. Sie können z. B. den neuen Benutzer als Antwort auf die Anfrage POST zurückgeben und diese Benutzerdaten in this.users eingeben. Eine andere Option ist, die gesamte Liste nach einem erfolgreichen POST/PUT neu zu laden. Ich denke, die erste Methode ist besser, da sie keine zusätzlichen HTTP-Anfragen verursacht. Codebeispiel:

insert(user: User) { 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    const options = new RequestOptions({ headers: headers }); 
    const url = this.baseUrl; 

    return this.http.post(url, JSON.stringify(user), options)   
    .do(response => console.log(JSON.stringify(data))) 
    // first, convert HTTP response to User instance (easier if User is 
    // just an interface, harder if it’s a class) 
    .map(response => response.json().user as User) 
    // then, push that User object to the existing array of users 
    // then you don’t have to “refresh” this.users, because it’s already 
    // up to date 
    .map(user => this.users.push(user)) 
    .catch(this.handleError); 
}