Verwenden Sie Fetch anstelle von Ajax mit Redux-Observable

Question

In redux-observable ist es möglich, isomporphic-fetch anstelle von Rx.DOM.ajax zu verwenden?

Answer 1

(Hinweis: RX.DOM.ajax ist von RxJS v4 und mit redux-observable nicht die RxJS v5 erfordert Arbeit Das Äquivalent in v5 ist Rx.Observable.ajax oder import { ajax } from 'rxjs/observable/ajax';.)

Es ist in der Tat möglich fetch() sowie jede zu verwenden andere AJAX API; obwohl einige sich leichter anpassen als andere!

fetch() Die API gibt einen Promise, die v5 RxJS hat eine eingebaute Unterstützung für. Die meisten Operatoren, die eine Observable erwarten, können Promises unverändert übernehmen (wie mergeMap, switchMap, usw.). Aber oft möchtest du Rx-Operatoren auf die Verheißung anwenden, bevor du sie an den Rest deiner Epik weiterleitest, also wirst du oft die Verheißung in ein Observable einhüllen wollen.

Sie können ein Versprechen in eine beobachtbare wickeln mit Observable.from(promise)

Hier ist ein Beispiel, wo ich für einen Benutzer zu holen, fordern Sie die JSON-Antwort, dann wickeln Sie das Versprechen in einer beobachtbaren:

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

Sie können das dann in Ihrem Epic konsumieren und alle gewünschten Operatoren anwenden:

Hier ist ein JSBin mit diesem Arbeitsbeispiel: https://jsbin.com/fuwaguk/edit?js,output

---

Wenn Sie die Kontrolle über den API-Code haben, im Idealfall würden Sie Observable.ajax (oder andere beobachtbare-basierte AJAX utils) verwenden, weil Versprechen nicht abgebrochen werden kann. (zum jetzigen Zeitpunkt)