如何将 Fetch API 响应转换为 RxJS Observable？

Question

如何转换任何Fetch API returns to RxJS Observable? Does RxJS.fromPromise帮助？

Answer 1

看看这个 article

var result = Rx.Observable.fromPromise(fetch('http://myserver.com/'));
result.subscribe(x => console.log(x), e => console.error(e));

Answer 2

作为 fetch 调用 returns 又一个包含响应对象的承诺，我将继续创建您自己的可观察对象：

import { Observable } from 'rxjs';

const data$ = Observable.create(observer => {
  fetch('http://server.com')
    .then(response => response.json()) // or text() or blob() etc.
    .then(data => {
      observer.next(data);
      observer.complete();
    })
    .catch(err => observer.error(err));
});

data$.subscribe(data => /*do something with data*/);

Answer 3

存在库 rxjs-fetch，但我建议不要使用它，而是写成：

const getData = (url, params) => {
    return fetch(url, params).then(r => {
        return r.ok ? r.text() : Promise.reject(`${r.statusText} ${r.status}`)
    })
}

const getDataObserver = (url, params) => Rx.Observable.fromPromise(getData())

（在 NodeJS 中你需要 node-fetch）

Answer 4

我正在使用 rxjs@6。

接受 observable 的运算符（如 flatMap、switchMap 等）也可以接受 promise。很简单，如下

somethingObservable.pipe(
    flatMap(() => fetch('http://some.api.com/post/1')),
    subscribe((response) => {
        console.log(response);
    }),
)

Answer 5

使用 rxjs 6.4 你可以使用 from 运算符

看到这个link：https://www.learnrxjs.io/operators/creation/from.html

示例在 TS 中：

public getModelDetails(): Observable<YourType> {

const apiCall = fetch(`yourURL/modelDetails`)
                   .then(response => response.json())
                   .then(responseJson => {
                          return responseJson as YourType
                    })
return from(apiCall)

}

Answer 6

我正在使用 rxjs 6.5.3。我正在使用下面的示例将 Fetch API 响应转换为 RxJS Observable.

const { from } = rxjs;
const { map, switchMap } = rxjs.operators


const observable = from(fetch('data/user.json')).pipe(
    switchMap(response => response.json())
)

observable.subscribe(function(result){
    console.log('result', result);
});

你也可以使用rxjs的 fromFetch。但 fetch API 仍处于实验阶段。

Answer 7

对于 observables，建议使获取可取消：

function fetch$(url:string, options:RequestInit) {
  return new Observable<Response>(subscriber => {
    const controller = new AbortController();
    options.signal = controller.signal;
    fetch(url, options)
    .then(res => {
      subscriber.next(res);
      subscriber.complete();
    })
    .catch(er => subscriber.error(er));
    return () => { // <- return the observable teardown function
      controller.abort();
    }
  })
}

见https://davidwalsh.name/cancel-fetch

如何将 Fetch API 响应转换为 RxJS Observable？

How to convert a Fetch API response to RxJS Observable?

rxjs

es6-promise

fetch-api