如何将 Fetch API 返回的内容转换为 RxJS Observable? RxJS.fromPromise 有帮助吗?
当 fetch 调用返回另一个包含响应对象的承诺时,我将继续创建您自己的可观察对象:
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*/);
看看这篇文章
var result = Rx.Observable.fromPromise(fetch('http://myserver.com/'));
result.subscribe(x => console.log(x), e => console.error(e));
我正在使用 rxjs@6.
接受可观察对象(如
flatMap
、switchMap
等...)的运算符也可以接受承诺。
非常简单如下。
somethingObservable.pipe(
flatMap(() => fetch('http://some.api.com/post/1')),
subscribe((response) => {
console.log(response);
}),
)
我正在使用 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 仍处于试验阶段。
使用 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)
}
存在库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)
对于 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();
}
})
}
就我而言,我使用了fromFetch:
import { fromFetch } from 'rxjs/fetch';
import { tap } from 'rxjs/operators';
const $observable = <T>(url: string, body: T) => fromFetch(url, {
method: 'POST',
mode: 'cors',
credentials: 'include',
body: JSON.stringify(body),
selector: (response) => response.json(),
}).pipe(tap(data => console.log('fetch data:', data)));
$observable('https://your-url.com', { somePayload: '' }).subscribe({
next: result => console.log(result),
complete: () => console.log('done')
});