如何解决Angular 11 httpClient 顺序请求？

我有一个前端需要通过休息端点添加一组项目。

我可以很好地进行一次调用，并且我相信我了解订阅 observable 的基础知识。确实，我可以成功编码单个请求并正确处理响应。

我不知道的是如何封装对服务器的多个调用。我想要一个返回 observable 的函数，这样它就像一个单一的调用。

知道状态并且确实插入是很重要的。

// the complete payload.
export class SignupDto {
  companyInfo: CompanyInfo;
  storeInfo: StoreDto [];
  constructor(storeCount: number) {
    this.companyInfo = new CompanyInfo();
    this.storeInfo = new Array(storeCount);
  }
}



// my attempt.
 public postCompanyInfo(store: SignupModel) {
    const payload = MappingService.MapToPayload(store);
    const headers = new HttpHeaders().set(''Content-Type'',''application/json'');
    const config = { headers: headers,observe: "response" as ''body'' };
    const Path = ''signup/'';
    const URL = `${this.Protocol_Domain_Port}${Path}`;
    this.httpClient.post(URL,payload.companyInfo,config).subscribe(
      (resp: any) => { if( resp.status === 201 ) { this.onInsertStores(payload.storeInfo,resp._links.stores.href); } },)
  }

  public onInsertStores(storeInfo: StoreDto [],URL: string) {
    const headers = new HttpHeaders().set(''Content-Type'',observe: "response" as ''body'' };
    if( !!storeInfo && storeInfo.length > 0 ) {
      this.httpClient.post(URL,storeInfo[0],config).subscribe(
          (resp: any) => { if( resp.status === 201 ) { storeInfo.shift(); this.onInsertStores(storeInfo,URL); } },);
    }
  }

该公司确实发布了，但随后商店在subscriber.js 调用堆栈的深处失败了。

catch (err) {
    this.unsubscribe();
    if (config.useDeprecatedSynchronousErrorHandling) {
        throw err;

我认为我可以使用某种递归解决方案，但即使有效，我也不知道如何在最后返回成功或失败的状态代码。

所以，我需要一种方法来首先插入公司信息，然后依次插入每个商店。如果出现故障，请停止并返回该错误。或者，如果他们都成功了，则返回成功。

我遇到了一种叫做管道映射器的东西，但老实说，我不理解它。所以，我不知道它是否能解决我的问题。

以防万一，这是我要发送的内容的模型。

{
  "companyInfo": {
    "companyAddress": {
      "address1": "1515 Elm St.","address2": "Other Suit","city": "Out of Dallas","state": "TN","zipcode": "77733"
    },"bankAddress": {
      "address1": "1717 Elm St.","address2": "broken Suit","city": "USSN Dallas","state": "LA","zipcode": "33377"
    },"companyName": "Test Company is my name!","companyTaxID": "999-99-9999","bankAccountNumber": "1000000001","bankRoutingNumber": "2000000002","bankName": "We got yo cash!","bankTelephone": "(666) 555-1212","bankFax": "(555) 555-1212","accountingContactFirstName": "Testitch","accountingContactLastName": "McTestersen","accountingContactEmail": "Testitch.McTestersen@Testy.co","accountingContactTelephone": "(444) 555-1212","accountingContactFax": "(333) 555-1212"
  },"storeInfo": [
    {
      "storeAddress": {
        "address1": "1313 Elm St.","address2": "Spare Suit","city": "Near Dallas","state": "TX","zipcode": "70033"
      },"storeName": "Test Co.","customerStoreID": "Test Co Stores #0","email": "Test@Testy.co","telephone": "(888) 555-1212","fax": "(777) 555-1212","storeType": "AUTO_FULL_SERVICE","posType": "SCANMASTER","mnspType": "PAYSAFE"
    },{
      "storeAddress": {
        "address1": "1313 Elm St.","customerStoreID": "Test Co Stores #1","customerStoreID": "Test Co Stores #2","mnspType": "PAYSAFE"
    }
  ]
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

getNamespaceLogs(logNamespace) {

    // Setup log namespace query parameter
    let params = new URLSearchParams();
    params.set('logNamespace',logNamespace);

    this._Http.get(`${API_URL}/api/v1/data/logs`,{ search: params })
}

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';//新增行
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,HttpClientModule //新增行
  ],providers: [],bootstrap: [AppComponent]
})

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';//新增行
@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private http: HttpClient){//新增行，httpclient注入到构造函数中，以使HttpClient可用。
  }
}

import { Component,OnInit } from '@angular/core';//新增导入OnInit
import { HttpClient } from '@angular/common/http';//新增行
@Component({
  selector: 'app-root',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {//新增implements OnInit
  title = 'app';
  results = '';
  constructor(private http: HttpClient){///新增行，httpclient注入到构造函数中，以使HttpClient可用。
  }
  //新增ngOnInit()方法
  ngOnInit(): void {    this.http.get('https://api.github.com/users/seeschweiler').subscribe(data => {
      console.log(data);
    });
  }
}