Javascript 冒泡对组件的HTTP post响应

如何在

UserCourseService

中获得

setUserCourses

的结果，以冒泡到

DashboardBodyHomeCourseModalComponent

？此时，

result

返回null

此外，我目前正在传入一个名为

courseSelectedOptions

的数组，该数组对我的API执行多个HTTP调用。在最后一个API调用结束时，我想对我的组件生成一个HTTP post响应

UserCourseService

setUserCourses(userId: string, courseSelectedOptions: number[]): Promise<unknown | void> {
return this.firebaseService.generateToken().then((token: string) => {
  this.logger.debug(`Token generated for setUserCourses: ${token}`);
  return observableFrom(courseSelectedOptions)
    .pipe(
      concatMap((courseSelectedOption) =>
        this.httpClient.post(
          `${environment.apiBasePath}/userCourses`,
          {
            user_id: userId,
            course_id: courseSelectedOption,
          },
          { headers: { authorization: `Bearer ${token}` } }
        )
      )
    )
    .subscribe(
      (response) => this.logger.debug(`setUserCourses response: ${JSON.stringify(response)}`),
      (error) => this.logger.debug(`setUserCourses error: ${JSON.stringify(error)}`),
      () => this.logger.debug('setUserCourses complete')
    );
});
}

setUserCourses(userId: string, courseSelectedOptions: number[]): Promise<unknown | void> {
    return this.userCourseService.setUserCourses(userId, courseSelectedOptions);
}

---

这是一个混合观测值和承诺的经典案例。我建议您使用RxJS

from

函数将承诺转换为可观察的。之后，您可以使用更高阶的映射操作符（

switchMap

）映射到HTTP请求，然后从服务返回它并在组件中订阅

服务

setUserCourses（userId:string，courseSelectedOptions:number[]）：可观察{//{
debug（`setUserCourses生成的令牌：${Token}`）；
返回this.httpClient.post(
`${environment.apiBasePath}/userCourses`，
{
用户id:userId，
课程编号：课程选择选项，
},
{头：{授权：`Bearer${token}`}
)
}),
水龙头(
（response）=>this.logger.debug（`setUserCourses response:${JSON.stringify（response）}`），
（错误）=>this.logger.debug（`setUserCourses错误：${JSON.stringify（错误）}`），
（）=>this.logger.debug（'setUserCourses complete'）
)
);
}

组成部分

this.dashboardBodyHomeFacade.setUserCourses（this.user.id，this.courseSelectedOptions）。订阅(
结果=>{
如果（结果）{
this.toastrService.success（'您的课程被选中了'，'太好了！'）；
this.bsModalRef.hide（）；
}否则{
此.toastrService.warning（'出现问题，请再试一次'，'Oops！'）；
}
},
error=>this.toastrService.warning（'出现问题，请再试一次'，'Oops！'）
);

更新：对

courseSelectedOptions

您可以使用RxJS

forkJoin

函数和

数组#映射

为

课程选择选项

中的每个项目触发多个并行HTTP请求。试试下面的方法

setUserCourses（userId:string，courseSelectedOptions:number[]）：可观察{//{
debug（`setUserCourses生成的令牌：${Token}`）；
返回forkJoin（courseSelectedOptions.map（courseSelectedOption=>//this.logger.debug（`setusercourseresponse:${JSON.stringify（response）}`），
（错误）=>this.logger.debug（`setUserCourses错误：${JSON.stringify（错误）}`），
（）=>this.logger.debug（'setUserCourses complete'）
)
);
}

您需要从您的可观察对象返回一个值，类似于此链接中给出的内容，不是真的，我不知道如何在我当前的体系结构中实现它，我是否在facade或服务或组件中返回值？在服务中，您需要在返回时将您的可观察对象转换为承诺，以便进一步的facade和组件可以使用方法

。然后

来解决承诺并获得价值我更新了问题以使其更清楚，执行多个HTTP调用会增加复杂性。我对“传递一个可观察的而不是服务的承诺”有疑问，为什么我们要这样做？Observable的内存占用比承诺更多，如果数据来自HTTP请求并且不会更改，最好使用承诺，因为Observable将继续监视对HTTP请求没有用处的更改。原因有很多。首先，承诺是这里的起点。它是仅用于获取令牌，我们使用observable向前推进。此外，observable提供了比promise更多的功能来控制数据流。但是，有一个问题，

courseSelectedOption

是一个数组，通过这种方法，它尝试一次插入所有值，而不是一次插入一个值。observable establish与Angular中的其他东西通用接口，并允许您以反应方式编写应用程序。如果您记得取消订阅，则这种情况下的内存占用不会超过承诺。对于XHR请求，可观测项允许取消请求，例如当您离开要获取数据的组件时。此外，您可以与其他观测项组成一个延迟流您不必急于给XHR打电话（因为承诺是有效的）。

this.dashboardBodyHomeFacade
.setUserCourses(this.user.id, this.courseSelectedOptions)
.then((result: unknown) => {
  if (result) {
    this.toastrService.success('Your courses have been selected.', 'Great!');
    this.bsModalRef.hide();
  } else {
    this.toastrService.warning('Something has gone wrong. Please try again.', 'Oops!');
  }
})
.catch(() => {
  this.toastrService.warning('Something has gone wrong. Please try again.', 'Oops!');
});