在for循环中以角度2链接http调用

Question

我有一些看起来像

的代码

//service.ts

addProduct(productId) {
   this.http.post('someUrl', ReqData).map(json).subscribe(doStuff);
}

//component.ts

addAllproducts(productsIds) {
   productIds.forEach(productId => service.addProduct(productId);
}

我想要的是能够在调用下一个productId之前等待每个调用完成，而不使用window.setTimeout ..

Answer 1

使用.expand() 进行一些递归调用怎么样？

首先，创建一个递归函数并映射数据以供递归使用：

const recursiveAddProduct = (currentProductId, index, arr)=>{
    return service.addProduct(currentProductId)
        .map((response)=>{
            return {
                data:response,
                index: index+1,
                arr:arr
            }
        })
};

现在，在您的组件中递归调用它：

//productIds is an array of Ids    
//start of using the first index of item, where index = 0

let reduced = recursiveAddProduct(productIds[0],0,productIds)
    .expand((res)=>{
        return res.index>res.arr.length-1 ? Observable.empty(): recursiveAddProduct(productIds[res.index],res.index,productIds)
    });

reduced.subscribe(x=>console.log(x));

这是一个有效的JSBin

使用.expand操作符的好处：

1. 您仍在使用 Observables，并且可以链接任何您想要的运算符。
2. 您一个接一个地调用 http，这是您的要求。
3. 您无需担心错误处理，它们都链接到单个流。只需将 .catch 呼叫您的 observables。
4. 您可以对递归方法执行任何操作（数据操作等）
5. 您可以设置终止递归调用的条件。
6. 单行（几乎）代码。

编辑

如果您不喜欢内联三元组，可以使用.take() 运算符终止递归，如下所示：

let reduced = recursiveAddProduct(productIds[0],0,productIds)
    .expand(res=>recursiveAddProduct(productIds[res.index],res.index,productIds))
    .take(productIds.length)

工作JSBin

Answer 2

首先从你的服务方法返回 observable：

addProduct(productId) {
   return this.http.post('someUrl', ReqData).map(json).subscribe(doStuff);
}

并使用递归函数并在 subscribe 回调中为数组中的每个项目调用它：

let loop = (id: number) => {
  service.addProduct(id)
    .subscribe((result) => {
      // This logic can be modified to any way you want if you don't want to mutate the `producIds` array
      if (productIds.length) {
        loop(productIds.shift())
      }
    })
}

loop(productIds.shift())

Answer 3

您可以使用 Observable.merge()。 试试类似的东西

addProduct(productId):Observable<Response> {
   return this.http.post('someUrl', productId);
}

addAllproducts(productsIds) {
   let productedsObservable:Observable<Response>[]=[];
   for(let productID in productsIds){
    this.productedsObservable.push(this.addProduct(productID));
   }
   return Observable.merge(productedsObservable)
}

您需要订阅请求的函数才能执行 http 请求。 你可以阅读更多关于组合运算符（如合并）here