Question

我有多种服务可以从服务器获取http响应。

export abstract class ServiceBase<T>{
    getAll(){console.log(`${this.url}/${this.endpoint}`)
        return this.http.get<any[]>(`${this.url}/${this.endpoint}`);
    }

    get(id: any){
        return this.http.get<any>(`${this.url}/${this.endpoint}/${id}`);
    }
}

@Injectable()
export class Service1 extends ServiceBase<any> {
    constructor(http: HttpClient) {
        super(http, "http://localhost:60211", "s1");
    }
}

@Injectable()
export class Service2 extends ServiceBase<any> {
    constructor(http: HttpClient) {
        super(http, "http://localhost:60211", "s2");
    }
}


@Injectable()
export class Service3 extends ServiceBase<any> {
    constructor(http: HttpClient) {
        super(http, "http://localhost:60211", "s3");
    }
}

我正在应用程序中使用它。

export class AppComponent {
     s1: {};
     s2: any[];
     s2: any[];
     constructor(service1:Service1, service2:service2, service3:service3){
        service1.get("123").subscribe({       
          next: response => {
            this.s1=response;
            service2.getAll().subscribe({
                    next: response => {
                        this.s2 = response;
                    }
            });
            service3.getAll().subscribe({
                    next: response => {
                        this.s3 = response;
                    }
            })
          }
         })
     }
}

但是s3和s2响应不是来自服务器。这种用法是假的吗？但是当我从邮递员那里运行服务时，服务正在工作。

Answer 1

您需要可插值的运算符switchMap和combineLatest来实现所需的功能。

它看起来像这样：

service1.get("123").pipe(
    switchMap(() => combineLatest(service2.getAll(), service3.getAll())),
).subscribe(([service2Data, servoce3Data]) => {
    // do your stuff
});

Answer 2

这里是forkJoin的示例。为了确保语法正确并能正常工作，请使用我的代码（而不是OPs代码）。

  // Suppliers for the selected product
  // Only gets the suppliers it needs
  // switchMap here instead of mergeMap so quickly clicking on the items 
  // cancels prior requests.
  selectedProductSuppliers$ = this.selectedProduct$
    .pipe(
      filter(selectedProduct => Boolean(selectedProduct)),
      switchMap(selectedProduct =>
        forkJoin(selectedProduct.supplierIds.map(supplierId => this.http.get<Supplier>(`${this.suppliersUrl}/${supplierId}`)))
      ),
      tap(suppliers => console.log('product suppliers', JSON.stringify(suppliers)))
    );

只要选择了新产品（this.selectedProduct），此代码都会收到通知

然后通过一系列操作通过管道传递选择内容：

它将筛选出一个空的selectedProduct（例如，首次显示该页面且用户尚未选择产品时）
它使用switchMap，因此如果用户快速连续选择产品1，产品2，产品3，则只会发出产品3。
它使用forkJoin获取为所选产品定义的每个SupplierId，并使用它获取供应商详细数据，然后将所有供应商合并为一个数组并发出该数组。

selectedProductSuppliers然后是Observable<Supplier[]>，并发出所选产品的供应商阵列。

您可以在此处找到完整的代码集：https://github.com/DeborahK/Angular-RxJS

一次编译后有角度的多个可观察的http调用

2 个答案: