小编典典

使用fetch代替redux-observable的ajax

ajax

redux-observable是否有可能使用isomporphic取的,而不是Rx.DOM.ajax


阅读 277

收藏
2020-07-26

共1个答案

小编典典

(注意:RX.DOM.ajax来自RxJS v4 ,并且不能与redux-observable需要RxJS
v5的版本

一起使用。v5中的等效项是Rx.Observable.ajaximport { ajax } from 'rxjs/observable/ajax';

确实可以使用fetch()以及其他任何AJAX API。虽然有些适应比其他容易!

fetch()API返回a Promise,RxJS v5对此具有 内置支持
。该预期可观察到的最能消耗运营商承诺按原样(如mergeMapswitchMap等)。但是通常您需要在将Rx运算符传递到Epic的其余部分之前将Rx运算符应用于Promise,因此,您通常需要将Promise包装在Observable中。

您可以使用以下方法将Promise封装为ObservableObservable.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,output


如果您可以控制API代码,则理想情况下,您将使用Observable.ajax(或任何其他基于Observable的AJAX
实用程序),因为无法取消Promises。(截至撰写本文时)

2020-07-26