Почему наблюдаемый в пределах наблюдаемого зависания

Question

У меня есть http.get вызов в моей службе member.service.ts, и я хочу подождать, пока этот вызов не завершится, прежде чем продолжить в app.component, поэтому я пытаюсь обернуть вызов http.get в Observable для обработки вapp.component.

[Примечание: ранее, до того как я обернул службу в Observable, служба работала нормально.,,вызов http.get сам по себе работает, как и ожидалось, и возвращает объект JSON.]

Но когда я обернул вызов http.get в Observable, как показано ниже, приложение зависает.Я искал в Интернете и читал о 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

import { Component, OnInit, Injectable } from '@angular/core';
import { MemberService } from './member.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

@Injectable()
export class AppComponent implements OnInit {
  got_data: boolean = false;
  data: string;

  constructor(private member: MemberService) {}

  ngOnInit() {

    this.member.getMemberForm().subscribe((data)=>{
      this.data = data;
      if (this.data.length > 0) this.got_data = true; 
    });
  }

}

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), просто создайте наблюдаемое (вызов http) в сервисе, а затем подпишитесь в вашем компоненте, чтобы вызвать запрос http, {responseType: 'json'} не требуется, все "последние" версии (> 4.3) углового http-клиента делают это по умолчанию

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

  }