angular rxjs：处理多个 http 请求

Posted 2023-03-13

【中文标题】angular rxjs：处理多个 http 请求

【英文标题】：angular rxjs: handle multiple http requests

【发布时间】：2021-05-26 19:29:44

【问题描述】：

我有以下伪代码

objects = [obj1, obj2, obj3]    
for obj in objects 
user: http.get(obj1.user_id)
product: http.get(obj1.product_id)
.subscribe(results => 

do something with results

)

我在这里想要的是，我遍历一个对象数组，并为每个对象获取相关的用户和产品，然后订阅以对用户和产品做一些事情。我该怎么做？

【问题讨论】：

您可以尝试使用 observables 检查以下信息：***.com/questions/35268482/… 或者您可以检查有关承诺的信息：javascript.info/promise-chaining

【参考方案1】：

您可以使用 RxJS forkJoin 和 Array#map 来并行触发多个可观察对象。

const objects = [obj1, obj2, obj3];

forkJoin(
  objects.map(obj =>           // <-- `Array#map` function
    forkJoin(
      user: http.get(obj.user_id)
      product: http.get(obj.product_id)
    )
  )
).subscribe(
  next: (res) => 
    console.log(res);
    // use `res`
  ,
  error: (err) => 
);


/*
output in subscription: 
[
   
    user: result from `http.get(obj1.user_id)`,
    product: result from `http.get(obj1.product_id)`,
  ,
   
    user: result from `http.get(obj2.user_id)`,
    product: result from `http.get(obj2.product_id)`,
  ,
   
    user: result from `http.get(obj3.user_id)`,
    product: result from `http.get(obj3.product_id)`,
  
]
*/

【讨论】：

如何 console.log 里面的订阅结果？

【参考方案2】：

您可以使用zip() operator 组合您的请求并在每个请求完成后执行一些代码：

const sourceOne = http.get(obj1.product_id);
const sourceTwo = http.get(obj2.product_id);

zip(sourceOne, sourceTwo).subscribe(val => 
    // do something
);