2016-07-26 33 views

Odpowiedz

35

(Uwaga: RX.DOM.ajax wynosi od RxJS v4, a nie działa z redux-observable która wymaga RxJS v5 Równowartość w v5 jest Rx.Observable.ajax lub import { ajax } from 'rxjs/observable/ajax';.)

To jest rzeczywiście możliwe użycie fetch() jak również wszelkie inny interfejs API AJAX; choć niektóre adaptują się łatwiej niż inne!

fetch() API zwraca Promise, który RxJS v5 ma wbudowane wsparcie dla. Większość operatorów, którzy oczekują tego, co można zaobserwować, może spożywać Obietnice bez zmian (np. mergeMap, switchMap itd.). Ale często będziesz chciał zastosować operatorów Rx do obietnicy, zanim przekażesz ją do reszty Eposu, więc często chcesz zawrzeć Obietnicę wewnątrz Obserwowalnego.

Można owinąć obietnica do obserwowanej z Observable.from(promise)

Oto przykład, gdzie sprowadzić dla użytkownika, zwraca odpowiedź JSON, a następnie owinąć obietnicę w zauważalny:

const api = { 
    fetchUser: id => { 
    const request = fetch(`https://jsonplaceholder.typicode.com/users/${id}`) 
     .then(response => response.json()); 
    return Observable.from(request); 
    } 
}; 

Następnie możesz go wykorzystać w swoim Epickim i zastosować dowolnych operatorów, których potrzebujesz:

const fetchUserEpic = action$ => 
    action$.ofType(FETCH_USER) 
    .mergeMap(action => 
     api.fetchUser(action.payload) // This returns our Observable wrapping the Promise 
     .map(payload => ({ type: FETCH_USER_FULFILLED, payload })) 
    ); 

Oto JSBin z tego przykładu roboczego: https://jsbin.com/fuwaguk/edit?js,output


Jeśli masz kontrolę nad kodu API, idealnie byś użyć Observable.ajax (lub innych obserwowalnych oparte utils AJAX), ponieważ obietnice nie mogą być anulowane. (od tego pisania)

+0

Dziękuję, Jay, za wyjaśnienie! – zatziky