Question

我在服务http.get中有一个member.service.ts呼叫，我想等到该呼叫完成后再继续进行app.component，所以我试图将{{1} }调用Observable在http.get中进行处理。

[注意：以前，在将服务包装到Observable中之前，该服务运行良好。。。 app.component本身可以正常工作并返回JSON对象。]

但是当我将http.get调用包装在一个Observable中时，如下所示，应用程序挂起。我在网上搜索并了解了http.get，flatMap等信息，但是我想保留当前的结构，其中forkjoin的调用位于http.get服务中，而所有其他代码都在member中。

非常感谢，如果有任何想法为什么要挂它以及如何解决！

app.component

member.service.ts

import { Injectable } from '@angular/core'; import { Observable, from, of } from 'rxjs'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class MemberService { url: string = "http://localhost:3000/sign-up"; data: string = ''; constructor(private http: HttpClient) { } getMemberForm(): Observable<any> { let library = this.http.get(this.url,{responseType: 'json'}); library.subscribe((data) => { this.data = JSON.stringify(data); }); return of(this.data); } }

app.component.ts

Answer 1

您没有以正确的方式处理异步代码。

异步代码是在常规代码执行流程之外运行的代码。 subscribe方法中的代码是异步的，只有在收到HTTP调用的响应时，它才会运行。

像这样更改代码：

getMemberForm(): Observable<any> {

   return this.http.get(this.url,{responseType: 'json'})
    .pipe(map( res => of(JSON.stringify(res))))    
  }

您的应用程序正在挂起，可能是因为您的this.data未定义并且您正在尝试将undefined更改为Observable

Answer 2

从不订阅服务，这是反应式编程（rxjs）中的“反模式”，只需在服务中创建observable（http调用），然后订阅组件即可触发http请求，{responseType：'json默认情况下，不需要Angular HTTP客户端的所有“最新”版本（> 4.3）都使用'}

interface MyDataType{
    data: any;
}

 getMemberForm() {
   //no need to type the function return beacuse typescript will do it for you
   //you can type directly the http call
   return this.http.get<MyDataType>(this.url);

  }

为什么在“可观察的悬挂”中观察到“可观察”？

2 个答案: