使用 forEach Angular 4 的多个 POST 请求答案

【问题标题】：Multiple POST Requests using forEach Angular 4使用 forEach Angular 4 的多个 POST 请求
【发布时间】：2017-10-03 18:47:44
【问题描述】：

所以我试图在 Angular 中从一个数组发出一个 POST 请求。基本上，当用户选择列表中的多个项目时，他们可以“解锁”每个项目。所以我遇到的问题是如何使用 forEach 进行 POST。我能够使用 forLoop 进行 POST，但问题是当它执行一个 POST 时，它不会执行另一个。有人可以指出我做错了什么，或者是否有更好的解决方案？

以下是我为找到可能的解决方案而查看的其他 Stack 问题：

Http request in forEach function. Angular2

Angular http post on loops

Chaining http calls in angular 2 in a for loop

组件.ts

locked: Array<any> = [];
// Unlock
  unlock() {
    let observer = {
      next(data) {
        data => console.log(data)
      },
      error(error) {
        return new Error('Post Error');
      },
      complete() {
        console.log("Completed");
        // window.location.reload();
      }
    }
    // On unlock send lock data to Service for POST
    this.http.postUnlock(this.unlocked).subscribe(observer);
  }

service.ts

// POST to UNLOCK RESOURCES
  postUnlock(locked) {
    let headers = new Headers();
    headers.append( 'Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    locked.forEach((lock) => {
      let newBody = JSON.stringify(lock);
      let auth = lock.AuthID;
      let form = lock.FormName;
      let options = new RequestOptions({ headers: headers, method: 'post', body: newBody });
      let newUrl = this.url + `?authid=${auth}&formname=${form}`;
      // POST to URL
      return this.http.post(newUrl, options).map(res => res.json());
    });
  }

是与 Observable 相关还是可以通过 Promises 处理？

感谢您的帮助。

【问题讨论】：

顺便说一句，您在组件中已将服务称为“http”？
@Wandrille 是的，我已经在我的组件中添加了该服务并从文件中导入了它，但是当我使用 forEach 时，我确实收到了一个错误属性 'subscribe' 在类型 'void' 上不存在，但是， forLoop 不会产生此错误
将locked.forEach 替换为return locked.map ;)
@Maxime 所以你是说要这样做？ return locked.map((lock) => { let newBody = JSON.stringify(lock); let auth = lock.AuthID; let form = lock.FormName; let options = new RequestOptions({ headers: headers, method: 'post', body: newBody }); let newUrl = this.url + `?authid=${auth}&formname=${form}`; // POST to URL return this.http.post(newUrl, options).map(res => res.json()); });
@Maxime 更改为return locked.map 后我现在有这个错误：TypeError: this.http.postUnlock(...).subscribe is not a function，来自 component.ts 文件跨度>

标签： javascript angular foreach http-post rxjs

【解决方案1】：

这是您查找的内容 (Http request in forEach function. Angular2) 和您的代码之间的混合。

你不能从 a 中返回一个值，因为它会退出函数 (What does `return` keyword mean inside `forEach` function?)

希望对你有帮助

postUnlock(locked){
  //create an array of Observables
  let allQueries = locked.map(lock => {
    let newBody = JSON.stringify(lock);
    let auth = lock.AuthID;
    let form = lock.FormName;
    let options = new RequestOptions({ headers: headers, method: 'post', body: newBody });
    let newUrl = this.url + `?authid=${auth}&formname=${form}`;
    // POST to URL
    return this.http.post(newUrl, options).map(res => res.json());
  });

  //return a new observable that will emit all the http results
  return Observable.forkJoin(allQueries)
}

【讨论】：

是的，有很多方法可以监听多个 observables。 forkJoin 听起来像你想要的。它将等待所有这些都完成，然后发出一个值数组，这些值对应于每个 observable 发出的 last 项。当您处理 promise-like 可观察对象（例如Http）时，它会发出一次然后完成。如果你想处理每个项目，你可以使用merge，如果你的observables多次发射，有办法处理组合每组发射（例如zip或combineLatest）。