使用fetch而不是带有redux-observable的ajax

在redux-observable中可以使用 isomporphic-fetch而不是 Rx.DOM.ajax吗？

(注意：RX.DOM.ajax来自RxJS v4,不适用于需要 RxJS v5的redux-observable .v5中的等价物是 Rx.Observable.ajax或者来自’rxjs / observable / ajax’的导入{ajax};)

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

fetch()API返回一个Promise,RxJS v5具有内置支持.大多数期望observable的运算符都可以按原样使用Promises(如mergeMap,switchMap等).但是通常你会想把Rx操作符应用到Promise中,然后再将它传递给你的Epic的其余部分,所以你经常想把Promise包装在一个Observable中.

您可以使用Observable.from(promise)将Promise包装到Observable中

这是一个示例,我获取用户,请求JSON响应,然后将promise包装在一个observable中：

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. (截至撰写本文时)

原文链接：https://www.f2er.com/ajax/160153.html

使用fetch而不是带有redux-observable的ajax

猜你在找的Ajax相关文章