使用 fetch 而不是 ajax 与 redux-observable答案

【问题标题】：Use fetch instead of ajax with redux-observable使用 fetch 而不是 ajax 与 redux-observable
【发布时间】：2016-11-30 01:44:21
【问题描述】：

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

【问题讨论】：

标签： ajax redux rxjs5 isomorphic-fetch-api redux-observable

【解决方案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 内置支持。大多数期望 observable 的操作符可以按原样使用 Promises（如 mergeMap、switchMap 等）。但通常您会希望在将 Promise 传递给 Epic 的其余部分之前将 Rx 运算符应用于 Promise，因此您通常希望将 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 实用程序），因为 Promise 无法取消。（在撰写本文时）

【讨论】：

谢谢你，杰伊的解释！

【解决方案2】：

对@jayphelps 进行了小幅调整，以便让该代码为我工作。希望这有助于节省某人的时间。

import { FETCH_USER } from './actions'
import { ofType } from 'redux-observable'
import { map, mergeMap } from 'rxjs/operators'
import { from } from 'rxjs'

const fetchUserEpic = action$ => {
    return action$.pipe(
        ofType(FETCH_USER),
        mergeMap((action = { user: 'redux-observable' }) => {
            const getRequest = (user) => {
                const request = fetch(`https://api.github.com/users/${user}`)
                    .then(response => response.json())
                return from(request)
            }

            return getRequest(action.user).pipe(
               map(payload => ({ type: FETCH_USER_FULFILLED, payload }))
            )
        })
    )
}

【讨论】：