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

发布时间：2020-12-16 03:07:24 所属栏目：百科来源：网络整理

导读：在redux-observable中可以使用 isomporphic-fetch而不是 Rx.DOM.ajax吗？ (注意：RX.DOM.ajax来自RxJS v4,不适用于需要 RxJS v5 的redux-observable .v5中的等价物是 Rx.Observable.ajax 或者来自’rxjs / observable / ajax’的导入{ajax};) 确实可以使用fe

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!