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

Question

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

Answer 1

(注意:RX.DOM.ajax 来自 RxJS v4，并且不适用于需要 RxJS v5 的 redux-observable 。 v5 中的等效项是 Rx.Observable.ajax 或 import { ajax } from 'rxjs/observable/ajax';)

确实可以使用 fetch() 以及任何其他 AJAX API；尽管有些人比其他人更容易适应!

fetch() API 返回一个 Promise，RxJS v5 对此有内置支持。大多数期望可观察的运算符可以按原样使用 Promises(例如 mergeMap、switchMap 等)。但通常您会希望在将 Promise 传递给 Epic 的其余部分之前对其应用 Rx 运算符，因此您经常希望将 Promise 包装在 Observable 中。

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

下面是一个示例，我获取用户、请求 JSON 响应，然后将 Promise 包装在可观察对象中:

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 实用程序)，因为 Promise 无法取消。 (截至撰写本文时)