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

我怎样才能将返回的内容转换为？有帮助吗？

看看这个

---

由于fetch调用返回另一个包含response对象的承诺，我将创建您自己的可观察对象：

从'rxjs'导入{Observable}；
const data$=Observable.create（Observable=>{
取（'http://server.com')
.then（response=>response.json（））//或text（）或blob（）等。
。然后（数据=>{
下一步（数据）；
observer.complete（）；
})
.catch（err=>observer.error（err））；
});
数据$.subscribe（数据=>/*使用数据做一些事情*/）存在库，但我建议不要使用它，而是写：

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中，您需要）
我正在使用rxjs@6.

接受可观察对象（如
flatMap
，
switchMap
等）的操作员也可以接受承诺。
它非常简单，如下所示

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

使用rxjs 6.4，您可以使用from操作符

请参阅此链接：

例如TS：

public getModelDetails(): Observable<YourType> {

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

publicGetModelDetails（）：可观察{
const apiCall=fetch（`yourURL/modelDetails`）
.then（response=>response.json（））
.然后（responseJson=>{
将responseJson作为您的类型返回
})
从（apiCall）返回

}我正在使用rxjs 6.5.3。我使用下面的示例将FetchAPI响应转换为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。但fetch API仍处于实验阶段。
对于可观察到的，建议将fetch设置为可取消：

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();
    }
  })
}

函数fetch$（url:string，options:RequestInit）{
返回新的可观察对象（订户=>{
const controller=new AbortController（）；
options.signal=controller.signal；
获取（url、选项）
。然后（res=>{
下一步（res）；
subscriber.complete（）；
})
.catch（er=>subscriber.error（er））；
return（）=>{ //如果您使用角或RxJS的话，您可能需要考虑使用角的HTTP服务。它们具有可取消的优点；承诺不能被取消。它是一个使用可观察的角度应用程序，但是这个应用程序在Web工作者中工作。角度HTTP与Web工作者不兼容。我不得不将其应用到工作中。它是否仍然使用比
XMLHttpRequest
性能更好的
XMLHttpRequest
压缩到FetchAPI？我真的不明白为什么这被否决了。我认为它实际上是一个比公认答案更健壮的解决方案。
可观察。fromPromise（fetch（…）
将立即触发请求，而上面的命令将在
之后有效地启动它。subscribe（）
。我看不出有任何理由在这里导入映射运算符。Observable.create（）已被弃用。相反，请使用：
const data$=new Observable（observator=>{…}）
@Dacomis我在文档中没有看到任何关于弃用的内容：@wawka由于TSLint，我的VSCode中出现了此弃用错误。
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();
    }
  })
}