如何在HTTP GET请求中执行订阅时将数据存储到变量中，angular

Question

我正试图存储从后端(Spring启动应用程序)发送到前端(angular)的JSON数据。现在每次我想将数据存储在一个变量,当我试图访问它之外的订阅,它将作为定义存储和将导致错误,我也使用多个文件和组件和我需要传递数据在多个文件。

export class AppComponent implements OnInit {
routes: RouteItem[] = [];
public serverMessage = ''; // <=== this is my main variable

constructor(private http: HttpClient, private routeService: RouteService) {
}
ngOnInit() {
this.http.get('http://localhost:8080/get-json').pipe(
first(),
tap(result => console.log('Message received from the server: ', result)),
map(result => this.serverMessage = (result as any).jsonMessage)
).subscribe(data => {
this.routes = this.routeService.getRoutes(this.serverMessage);
}
);
// If I put a console.log(this.serverMessage); here, it wont recognize the data anymore.
}
}

谁能给点提示和建议如何解决这个问题?

Answer 1

您正确地存储了数据，由于java脚本的原因，控制台日志的输出未定义。
JS在处理异步操作(如API调用)之前执行所有同步操作。

1. API调用被执行。
2. console.log被执行，变量仍然是undefined
3. 订阅范围被执行。
4. api返回一个值。
5. 设置变量。

有几种方法可以存储和使用异步操作中的数据。

其中之一是使用BehaviorSubject。

BehaviorSubject就像一个具有get和set能力的属性，加上一个额外的功能;你可以订阅它。所以当属性发生变化时，我们就会收到通知，然后我们就可以对

进行操作了

TS:

constructor(private http: HttpClient) {
this.serverMessageSubject= new BehaviorSubject<any>(null);
}
serverMessageSubject: BehaviorSubject<any>;
serverMessage$:Observable<any>;

ngOnInit(): void {
this.getData();
this.serverMessage$= this.serverMessageSubject.asObservable();
this.serverMessage$.subscribe((result)=>
{
console.log("here you can set your files etc...",result)
})
}
getData() {
this.http
.get<any>('http://localhost:8080/get-json')
.pipe(
tap((result) => {
this.serverMessageSubject.next(result);
})
)
.subscribe((data) => {
});
}

HTML:

<div>{{ serverMessage$ | async | json }}</div>