Angular 6：如何识别 forkJoin 响应答案

【问题标题】：Angular 6 : How to identify forkJoin responseAngular 6：如何识别 forkJoin 响应
【发布时间】：2018-08-25 03:04:45
【问题描述】：

Angular 6：如何使用 forkJoin

识别 api 的响应

reqs = [];
if (shouldUpdatePhone) {
   reqs.push(this.customerService.updatePhone(phoneUpdateRequest))
}
if (shouldUpdateAddress) {
   reqs.push(this.customerService.updateAddress(addressUpdateRequest))
}

forkJoin(reqs).subscribe(result => {
   console.log('result :', result);
  //How to know response is from updatePhone and response from updateAddress?
});

如何识别收到的响应属于 updatePhone 和 updateAddress？根据身份，我需要向用户显示消息。

这两个 api 返回 数组(2) >

{model:true, code:200, message:null},

{model:true, code:200, message:null}

【问题讨论】：

forkJoin 保留顺序，因此结果数组的排序方式与您列出源 Observables 的方式相同。

标签： angular rxjs

【解决方案1】：

您可以在每个请求后使用map 管道将您的响应包装在另一个标识其类型的对象中。就像这样：

reqs = [];
if (shouldUpdatePhone) {
    reqs.push(this.customerService.updatePhone(phoneUpdateRequest)
        .pipe(map(value => ({type: 'phone', value: value})))
        .pipe(catchError(value => of({type: 'phone', failed: true}))))
}
if (shouldUpdateAddress) {
    reqs.push(this.customerService.updateAddress(addressUpdateRequest)
        .pipe(map(value => ({type: 'address', value: value})))
        .pipe(catchError(value => of({type: 'address', failed: true}))))
}

forkJoin(reqs).subscribe(results => {
    console.log('result :', results);

    for(let result of results){
        if(result.type == 'phone'){
            if(result.failed)
                console.log("Phone failed");
            else
                console.log("Phone: " + result.value);
        }

        else if(result.type == 'address'){
            if(result.failed)
                console.log("Address failed");
            else
                console.log("Address: " + result.value);
        }
    }
});

【讨论】：

在使用forkJoin 操作符时不需要添加类型的管道，因为值是根据可观察的数组排序的。
没错，但是他有条件地将可观察对象添加到数组中，因此您不会知道哪些请求实际上是 forkJoin 的一部分。是[电话]、[地址]、[电话、地址]还是[]
@ggrading 你是对的。我不确定哪个会执行，这取决于条件，并且可能会出现其中任何一个失败的情况。
这仍然不是必需的，但如果有其他更新，将来可能会使代码更容易扩展。否则，您可以轻松查看结果的大小和 shouldUpdatePhone/shouldUpdateAddress 变量以了解请求是什么。
@ggradnig 但事实并非如此，而且多个订阅不会造成问题……不会进行冗长的辩论。这是一个示例，仅表明不需要stackblitz.com/edit/…

【解决方案2】：

你可以这样做：

forkJoin(reqs).subscribe(([phone, address]) => {
   if (!shouldUpdatePhone) {
     address = phone;
   }
});

但我认为你正在监督一些事情，forkJoin 会在所有内部可观察对象完成后发出一系列响应。所以它只会发出一次，包含两个响应（如果它们都被添加到数组中）

另一种选择是将管道添加到 forkJoin 和内部 subs （未经测试的代码）：

const reqs = [];
if (shouldUpdatePhone) {
   reqs.push(this.customerService.updatePhone(phoneUpdateRequest)).pipe(
     map((response) => ({ phone: response }))
   );
}
if (shouldUpdateAddress) {
   reqs.push(this.customerService.updateAddress(addressUpdateRequest)).pipe(
     map((response) => ({ address: response }))
   );
}

forkJoin(reqs).pipe(
  map((responses) => reponses.reduce((a, b) => ({...a, ...b}), {}))
).subscribe(result => {
   // result.address;
   // result.phone;
});

【讨论】：

【解决方案3】：

基于RxJS documentation：

forkJoin 将等待所有传递的 Observables 完成，然后它会发出一个数组，其中包含来自相应 Observables 的最后一个值。因此，如果您将n Observables 传递给运算符，则结果数组将具有n 值，其中第一个值是第一个 Observable 发出的最后一个值，第二个值是第二个 Observable 发出的最后一个值，依此类推。

因此，您的 result 值应该是一个数组，第一个值是 updatePhone(...) 可观察对象的响应，第二个值是updateAddress(...) 可观察对象的响应。

【讨论】：