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": "[phone]","bankFax": "[phone]","accountingContactFirstName": "Testitch","accountingContactLastName": "McTestersen","accountingContactEmail": "[e-mail]","accountingContactTelephone": "[phone]","accountingContactFax": "[phone]"
  },"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": "[e-mail]","telephone": "[phone]","fax": "[phone]","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 (将#修改为@）