navigationend - Angular2 observable y prometedor

title angular 6

Question

Empecé a usar Angular2 Observable , pero no puedo encontrar algo similar a .then que usé con Promises .

Esto es lo que quiero lograr.

código de header.component.ts

public login() {
    this._user = AuthService.getInstance().login(this._loginInfo);
}

código de auth.service.ts

return this._httpClient.post(''LoginAction'', credentials)
  .map(res => res.json())
  .subscribe(user => {
    return new User(user);
  });

Con promesas, la función de login devolvería Promesa, que eventualmente se transformaría en respuesta real del servidor. Pero con Observable esto no funcionará.

¿Hay alguna manera de hacer algo similar? Quiero evitar la necesidad de poner la suscripción dentro de la función de login component . Quiero poder hacer todo el trabajo en servicio y devolver el objeto real al component .

Además, traté de crear Promise , con toPromise Promise , pero sigo llegando a toPromise is not a function .

ps _httpClient es mi envoltorio alrededor de angular2 http en el que preparo la solicitud agregando algunos encabezados, etc.

editar

return this._httpClient.post(''LoginAction'', credentials)
  .map(res => res.json())
  .toPromise().    <-- i keep getting that it is not a function
  then(user => {
    return new User(user);
});

al hacer esto, mi componente obtendrá un objeto (que es lo que necesita), y en servicio podría hacer cosas adicionales (como guardar al usuario en el almacén local, una vez que lo haya registrado).

¿Y cambié a Promise , porque hacer lo mismo con Observable no funciona (o lo estoy haciendo mal)?

Veo que el objeto devuelto es Observable (antes de llamar a Promesa), pero no veo la función toPromise hecho.

Answer 1

Cuando llame a subscribe(...) se devuelve una Subscription que no tiene un toPromise() . Si mueve el código de subscribe al map , puede usar para toPromise() lugar de subscribe

return this._httpClient.post(''LoginAction'', credentials)
  .map(res => res.json())
  .map(user => {
    return new User(user);
  }).toPromise();

y la persona que llama obtendrá una Promise donde puede obtener el valor usando

public login() {
    this._user = AuthService.getInstance().login(this._loginInfo)
    .then(result => {
      doSomething();
    });
}

pero obtienes el mismo resultado si omites `.toPromise () y la persona que llama lo usa como

public login() {
    this._user = AuthService.getInstance().login(this._loginInfo)
    .subscribe(result => {
      doSomething();
    });
}

donde la única diferencia es subscribe() lugar de then() y si el usuario de la biblioteca prefiere el estilo reactivo, preferirá usar subscribe() como solía hacerlo.

Answer 2

De la documentación de Angular2

Aconsejamos agregar esto en rxjs-extension.ts

```
// Observable class extensions 
   import ''rxjs/add/observable/of''; 
   import ''rxjs/add/observable/throw'';

// Observable operators 
   import ''rxjs/add/operator/catch''; 
   import ''rxjs/add/operator/debounceTime''; 
   import ''rxjs/add/operator/distinctUntilChanged''; 
   import ''rxjs/add/operator/do''; 
   import ''rxjs/add/operator/filter''; 
   import ''rxjs/add/operator/map''; 
   import ''rxjs/add/operator/switchMap''; 
```

E importarlo en app.module.ts (Root Module) import ''./rxjs-extensions'';

Esto nos ayudará a prevenir más errores.

Answer 3

Necesita importar el operador Rx toPromise como

import ''rxjs/add/operator/toPromise'';

¡Aclamaciones!