Soru Angular2 Gözlemlenebilir ve Söz

Angular2 kullanmaya başladım Observableama benzer bir şey bulamıyorum .then ile kullandığım Promises.

Bu benim gerçekleştirmek istediğim şey.

header.component.ts adresinden kod

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

auth.service.ts gelen kod

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

Sözlerle, login işlevi, söz konusu sunucuya gerçek yanıt olarak dönüşecek olan Promise'e geri dönecektir. Ama Gözlemlenebilir ile bu işe yaramaz.

Benzer bir şey yapmanın bir yolu var mı? İçine abone koyma ihtiyacından kaçınmak istiyorum component'ler login işlevi. Hizmetteki tüm işleri yapabilmek ve gerçek nesneyi component.

Ayrıca, yaratmaya çalıştım Promise, ile toPromiseama almaya devam ediyorum toPromise is not a function.

Not; _httpClient, bazı üstbilgileri vb. ekleyerek istek hazırladığım angular2 etrafındaki sarıcıdır.

Düzenle

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);
});

Bunu yaparak, bileşenim (ihtiyaç duyduğu şey) nesneyi alacak ve hizmette ek şeyler yapabileceğim (kullanıcıyı oturum açtıktan sonra, kullanıcı kaydetme gibi).

Ve ben değiştirdim Promiseçünkü aynı şeyi yapıyor Observable çalışmıyor (ya da yanlış yapıyorum)?

Döndürülen nesnenin Gözlemlenebilir olduğunu görüyorum (Promise çağrılmadan önce), ancak göremiyorum toPromise gerçekten işlev.

2018-04-15 13:16

Menşei

"Tüm işi hizmette yapmak ve gerçek nesneyi bileşene geri döndürmek istiyorum." - Bunu yapamazsın çünkü httpClient.post eş zamansızdır, dolayısıyla geri aramak için then Promise kullanıyorsanız ya da subscribe RxJS Gözlemlenebilir'i kullanırsanız işlev. ES6'da uyumsuzluk / bekleyiş varponyfoo.com/articles/understanding-javascript-async-await) kodunuzu doğrusal gibi gösterebilir, ancak altındaki geri çağrıları kullanarak çalışır. - metamaker

Cevaplar:

Aradığın zaman subscribe(...) bir Subscription olmayan bir iade edilir. toPromise(). Eğer kodu subscribe için map kullanabilirsiniz toPromise() yerine subscribe

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

ve arayan bir Promise kullanarak değeri nereden alabilir

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

ama eğer .toPromise () öğesini çıkarırsanız aynı sonucu alırsınız ve arayan kişi

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

tek fark nerede subscribe() yerine then() ve kütüphanenin kullanıcısı tercih ettiği reaktif stili tercih ederse subscribe() O alıştığı gibi.

2018-04-15 13:20

subscribe bir döndürür Disposable ve değil abone - smnbbrv

subscribe(observerOrNext?: PartialObserver<T> | ((value: T) => void), error?: (error: any) => void, complete?: () => void): Subscription; - Günter Zöchbauer

Nereden aldığını bilmiyorum, buraya bak: github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/... - smnbbrv

github.com/ReactiveX/rxjs/blob/.... Olabilir Disposable rxjs4. Açısal rxjs5 kullanır. - Günter Zöchbauer

Hem, olabilir ... - smnbbrv

Rx toPromise operatörünü

import 'rxjs/add/operator/toPromise';

Şerefe!

2018-05-04 16:04

Angular2 belgelerinden

Bunu eklemek için tavsiye ediyoruz 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'; 
```

Ve onu içe aktarın app.module.ts (Kök Modülü) import './rxjs-extensions';

Bu, daha fazla hatayı önlememize yardımcı olacaktır.

2017-09-27 19:13

Soru Angular2 Gözlemlenebilir ve Söz

header.component.ts adresinden kod

auth.service.ts gelen kod

Düzenle

Cevaplar:

Popüler Sorular