Javascript 角度5：发送需要按顺序执行的HTTP请求数组

我试图发送一个HTTP请求数组，这些请求需要按顺序执行，但我不知道如何执行。下面是我申请的详细情况

应用实体：

• 位置-可以具有以下属性的实体：

  FanZone FanZone

  ，

  列出位置管理员

• FanZone-具有以下属性的实体：

  列出fanZoneAdmins

想法：

• 通过填写下面图片上的表单，并单击“下一步”按钮，我将在我的Angular服务中保存一个位置对象，因为在应用程序用户填写完管理员信息之前，我不想发布它（填写管理员信息的表单在单击“下一步”按钮后显示给用户）

• 应用程序用户成功填写上图所示的位置信息表单后，他必须填写位置管理员和风扇区域管理员的信息。表格如下图所示

• 当应用程序用户成功填写上图所示的管理员表单时，我想注册位置实体（发送POST请求），并在将同一位置实体发布到数据库后，我想发送一组HTTP POST请求，以便注册

  LocationAdministrator

  列表和

  FanZoneAdministrator

  实体列表

角度代码：

next() {

    this.locationService.registerLocation(this.location).subscribe(
      (response: Response) => {
        console.log('Successfully registered Location!');
        console.log(response.json());
      },
      (error: Response) => {
        console.log('Error occured while trying to register new Location');
      }
    );

    var fanZoneAdmin: User;

    this.registerFanZoneAdminForm.get('fanZoneAdminArray').value.forEach(element => {
      console.log(element);
      fanZoneAdmin = new User(element.username,element.password,element.email,element.firstName,element.lastName,element.city,element.phoneNumber, null,null,null,null, null,this.location.fanZone,null,new Role("FZA"),null);

      this.usersService.registerFanZoneAdmin(fanZoneAdmin).subscribe(
        (response: Response) => {
          console.log('Successfully registered Fan Zone Administrator!');
          console.log(response.json());

        },
        (error: Response) => {
          console.log('Error occured while trying to register new Fan Zone Administrator');
        }
      );
    });

    console.log('Submitting Location Administrator!')
    var locationAdmin: Location;

    this.registerLocationAdminForm.get('locationAdminArray').value.forEach(element => {
      console.log(element);
      locationAdmin = new User(element.username,element.password,element.email,element.firstName,element.lastName,element.city,element.phoneNumber,  null, null,null, null, null,null,this.location, new Role("LA"),null);

      this.usersService.registerLocationAdmin(locationAdmin).subscribe(
        (response: Response) => {
          console.log('Successfully registered Fan Zone Administrator!');
          console.log(response.json());
        },
        (error: Response) => {
          console.log('Error occured while trying to register new Fan Zone Administrator');
        }
      );
    });

    console.log('DONE!')

  }

注意：

this.registerFunzoneAdminForm.get（'fanZoneAdminArray'）.value.forEach（元素=>{..}）

之所以存在，是因为我使用了

FormArray

。这里的值是一个

数组

，元素是单个

FanZoneAdministrator

（registerLocationAdminForm.get（'locationAdminArray'）.value.forEach（元素=>{..}）也是如此。）

HTTP请求的顺序应该类似于代码：位置->风扇区管理员列表->位置管理员列表

---

任何形式的帮助都将不胜感激

您可以在收到对当前请求的响应后发送下一个请求

以下是一个例子：

let fanZoneAdminArray = this.registerFanZoneAdminForm.get('fanZoneAdminArray').value;
let locationAdminArray = this.registerLocationAdminForm.get('locationAdminArray').value;

this.locationService.registerLocation(this.location).subscribe((response: Response) => {
    fanZoneAdminRecursion(0, fanZoneAdminArray, () => {
        locationAdminRecursion(0, locationAdminArray, () => {
            // All requests were sent.
        });
    });
  });


let fanZoneAdminRecursion = (index, array, onDone) => {

    let fanZoneAdmin = new User(element.username,element.password,element.email,element.firstName,element.lastName,element.city,element.phoneNumber, null,null,null,null, null,this.location.fanZone,null,new Role("FZA"),null);

    this.usersService.registerFanZoneAdmin(fanZoneAdmin).subscribe((response: Response) => {
      if(index < array.length - 1){
          fanZoneAdminRecursion(++index, array, onDone);
      }else{
         onDone();
      }
   });      
}


let locationAdminRecursion = (index, array, onDone) => {

  let locationAdmin = new User(element.username,element.password,element.email,element.firstName,element.lastName,element.city,element.phoneNumber,  null, null,null, null, null,null,this.location, new Role("LA"),null);

  this.usersService.registerLocationAdmin(locationAdmin).subscribe((response: Response) => {
      if(index < array.length - 1){
          locationAdminRecursion(++index, array, onDone);
      }else{
          onDone();
      }
  });
}

让fanZoneAdminArray=this.registerFunzoneAdminForm.get（'fanZoneAdminArray'）.value；
让locationAdminArray=this.registerLocationAdminForm.get（'locationAdminArray'）.value；
this.locationService.registerLocation（this.location）.subscribe（（响应：响应）=>{
fanZoneAdminRecursion（0，fanZoneAdminArray，（）=>{
locationAdminRecursion（0，locationAdminArray，（）=>{
//所有请求都已发送。
});
});
});
让fanZoneAdminRecursion=（索引、数组、onDone）=>{
让fanZoneAdmin=新用户（element.username、element.password、element.email、element.firstName、element.lastName、element.city、element.phoneNumber、null、null、null、null、this.location.fanZone、null、新角色（“FZA”）、null）；
this.usersService.registerFanZoneAdmin（fanZoneAdmin）.subscribe（（响应：响应）=>{
if（索引{
让locationAdmin=新用户（element.username、element.password、element.email、element.firstName、element.lastName、element.city、element.phoneNumber、null、null、null、null、null、this.location、新角色（“LA”）、null）；
this.usersService.registerLocationAdmin（locationAdmin）.subscribe（（响应：响应）=>{
if（索引

在这里，我使用递归调用一个函数，该函数在前一个元素的响应到达后处理数组中的下一个元素

---

使用

Promise

可以大大简化这一过程。有了承诺，这将像

Promise.all（firstCall、secondCall等）一样简单。

Promise.all

不是正确的方法，因为它允许并发。要序列化它们，请使用

等待

或

然后

@AluanHaddad是的，您是对的。我没有正确地解释它，

Promise.all应该使用，而不是递归函数，比如：
registerLocation（（）=>Promise.all（…fanZoneAdminArray）。然后（（）=>Promise.all（…locationAdminArray））
yes，这更有意义。但是，由于OP已经在使用transpiler，因此等待将更具可读性。但你还是会用所有的时间感谢你的帮助！我已经根据你的解决方案解决了这个问题！