web-dev-qa-db-ja.com

Fetch APIレスポンスをRxJS Observableに変換する方法は？

Fetch API が返すものを RxJS Observable に変換するにはどうすればよいですか？ RxJS.fromPromise は役に立ちますか？

rxjses6-promisefetch-api
12
wonderful world

これをチェックしてください 記事

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

Fetch呼び出しが応答オブジェクトを含むさらに別のpromiseを返すので、独自のオブザーバブルを作成します。

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*/);
25
wawka

私はrxjs @ 6を使用しています。

オブザーバブル（flatMap、switchMapなど...）を受け入れる演算子も、promiseを受け入れることができます。次のように非常に簡単です。

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

ライブラリ 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 が必要になります）

2
sonnenhaft

Rxjs 6.4を使用すると、from演算子を使用できます

このリンクを参照してください： 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)

}

2
Choco

私は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 を使用することもできます。ただし、フェッチAPIはまだ実験段階です。

1
Kuldeep Semwal