在 Angular 中,我们经常使用 RxJS Observables 来处理异步操作。有时,我们需要在内部 Observable 中等待 HTTP 响应,以便继续处理其他操作。下面是一个示例:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-example',
template: '{{ data }}'
})
export class ExampleComponent {
data: string;
constructor(private http: HttpClient) { }
ngOnInit() {
const source1$: Observable = this.http.get('url1');
const source2$: Observable = this.http.get('url2');
source1$.subscribe((s1: string) => {
source2$.subscribe((s2: string) => {
this.data = s1 + ', ' + s2;
});
});
}
}
上面的代码会在加载组件时调用 ngOnInit 方法,并发起两个 HTTP 请求。在第一个请求的回调中,我们再次发起第二个请求,并在第二个请求的回调中处理数据。这种实现方式有一个问题,就是它相当于嵌套了两个 Observable,只有在第一个请求完成并发出数据时,才会发起第二个请求。
相反,我们可以使用 mergeMap 操作符将第一个 Observable 转换为第二个 Observable,然后在 flatMap 中处理数据。这样,我们不会等待第一个请求完成后才发起第二个请求,并且可以在 inner Observable 中等待 HTTP 响应:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: '{{ data }}'
})
export class ExampleComponent {
data: string;
constructor(private http: HttpClient) { }
ngOnInit() {
const source$: Observable = this.http.get