Используйте fetch вместо ajax с redux-observable

на redux-observable можно использовать isomporphic-fetch вместо Rx.ДОМ.ajax?

12
ajax isomorphic-fetch-api redux redux-observable rxjs5

1 ответов

(Примечание: RX.DOM.ajax от RxJS v4, и не работает с redux-observable что требует RxJS v5. Эквивалент в v5 -Rx.Observable.ajax или import { ajax } from 'rxjs/observable/ajax';)

можно использовать fetch() а также любой другой API AJAX; хотя некоторые адаптируются легче, чем другие!

на fetch() API возвращает Promise, который RxJS v5 имеет встроенная поддержка. Большинство операторов, ожидающих наблюдаемого может потреблять обещания как есть (например mergeMap, switchMap и т. д.). Но часто вы захотите применить операторы Rx к обещанию, прежде чем передавать его остальной части вашего эпоса, поэтому вы часто захотите обернуть обещание внутри наблюдаемого.

вы можете обернуть обещание в наблюдаемое с Observable.from(promise)

вот пример, где я получаю для пользователя, запрашиваю ответ JSON, а затем обертываю обещание в наблюдаемом:

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

вы тогда можете потребляйте это в своем Epic и применяйте любые операторы, которые вы хотите:

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

вот JSBin с этим рабочим примером:https://jsbin.com/fuwaguk/edit?js, выход

если у вас есть контроль над кодом API, в идеале вы бы использовали Observable.ajax (или любые другие наблюдаемые на основе AJAX utils), потому что обещания не могут быть отменены. (на момент написания этой статьи)

39