在 Angular 中，如何将我的发布请求的响应作为参数之一传递给另一个发布请求？答案

【问题标题】：In Angular how can I pass the response of my post request as one of the parameters to go into another post request?在 Angular 中，如何将我的发布请求的响应作为参数之一传递给另一个发布请求？
【发布时间】：2020-06-02 21:11:09
【问题描述】：

我有一个包含两个部分的表单，分派两个发布请求操作，第二个请求需要第一个请求的参数才能成功发送。但我不确定如何:(我的第一个操作的请求和响应工作正常，但我只是不确定如何或在哪里实现逻辑 - 它应该在服务中吗？减速器？我当时尝试了 forkjoin意识到我不知道自己在做什么。提前感谢您的帮助！

我的组件：


    const newArtist = this.store.dispatch(new CreateArtist({
      ...generalDetails,
      hometown,
    }))

    const newArtistExtraInfo = this.store.dispatch(new CreateDiscography({
      ...songCatalogue
    }
    ));

    forkJoin([newArtist, newArtistExtraInfo]).subscribe(result => {
      console.log(`the results are in : ${result}`)
    })

【问题讨论】：

第二个请求需要用到第一个请求的哪些参数？
第一个请求给出了一个令牌和 id 的响应，它们都需要作为 CreateDiscography 操作的参数发送

标签： angular redux action ngrx ngxs

【解决方案1】：

如果您想使用第一个调度的操作的结果，那么您很可能希望在处理 CreateArtist 之后读取更新的状态。

在您的组件中，您可以使用 Selector，它返回由 ArtistState 处理 CreateArtist 产生的最新创作艺术家：

@Select(ArtistState.latestArtist) artist$: Observable<Artist>;

this.store.dispatch(new CreateArtist(..))
.pipe(
   withLatestFrom(this.artist$)
)
.subscribe(([_, artistInfo]) => {
  this.store.dispatch(new CreateDiscography({ .., artistInfo.token, artistInfo.id });
})

所以在这里您发送创建艺术家操作，然后在创建后读取状态以获取您需要发送后续唱片操作的艺术家特定信息。

另一种选择是，您的状态作为包含您所追求的令牌/ID 的 ArtistCreated 动作进行调度，并且您的组件通过动作流订阅该动作，然后它可以在该动作流中调度唱片动作。

【讨论】：

感谢您的回复，非常感谢 - 您能否在返回的艺术家信息对象之前澄清 _ 的使用。我还在学习，但想知道为什么你需要将它放在前面的括号中 _, 。非常感谢！
好的，所以我刚刚读过，因为 withLatestFrom 需要两个来源和两者的最新快照 - 但由于除了 createArtist 操作之外没有任何其他内容，我猜 _ 是一个占位符?
_ 只是从第一个 dispatch Observable 返回的别名。这里的其他答案对于 RxJs 是正确的，但对于 NGXS，你不应该依赖 store.dispatch Observable 返回任何东西 - 它目前返回整个状态，但很快它将在即将到来的 v4 release 中更改为 void
啊，好酷，感谢您的提醒 - 我会牢记这一点，继续前进。干杯！

【解决方案2】：

在这种情况下，您可以使用 RxJS switchMap 运算符将第二个请求传递给管道。试试下面的

firstRequest().pipe(
  switchMap(responseFirst => secondRequest(responseFirst)),
  catchError(errorFirst => of(errorFirst))
).subscribe(
  responseSecond => { },
  errorSecond => { }
);

现在第一个请求将完成，它的响应将用作第二个请求的参数。还有其他用于特定目的的高阶映射运算符，例如 mergeMap、concatMap 和 exhaustMap。

【讨论】：

太棒了 - 我现在要试一试，谢谢你的帮助 - 真的很感激

【解决方案3】：

为此，您需要扩展处理 CreateArtist 的效果以调度另一个操作。

ofType(actions.CreateArtist),
switchMap(action => this.http.get('url1')),
// this action goes to effects again to its own handler.
map(response => new CreateDiscography(someParams)),

【讨论】：