angular - 在迭代 forEach 循环之前等待异步方法执行：Angular 4

Question

我正在调用一个正在执行一些异步操作的方法，并且我想在迭代循环之前等待这些方法完成，以便异步操作按顺序完成。但我无法理解如何实现这一目标。这是我正在做的事情：

_.forEach(this.pendingUsers.queue, (user) => {
  this.myService.setUserInfo(user);
});

在上面我想添加一个在 setUserInfo() 完成之前不会增加 for 循环的逻辑。

注意：我使用的是 Lodash 4 的 forEach 方法，所以请忽略不同的语法。

标签： angular

Answer 1

这是实现结果的两种方法（我没有使用单独的http服务来将所有代码保存在一个地方）

With to promise是第一个解决方案，我使用了 es5 中的 async await 函数。我正在创建循环，在那个循环中，我正在等待循环中调用的结果，然后才调用下一个请求。

使用 observables ，第二个解决方案对angularDev 更加友好，并且使用rxjs Subjectwhich 是这样的对象，它在调用. 这里需要注意的是，我们必须在某个时间点取消订阅主题，否则我们将陷入无限循环，这并不酷，还要注意我使用运算符以避免未经授权的订阅.next()Subjectfirst()

这是一个现场演示CodeSandbox *看控制台

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { first } from "rxjs/operators";
import { Subject } from "rxjs/Subject";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";

  dumySubject = new Subject();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    let currentIndex = 1;

    //With toPromise
    let indexes = [1, 2, 3, 4];
    let someFunc = async () => {
      for (const id of indexes) {
        let someResp = this.http
          .get("https://jsonplaceholder.typicode.com/posts/" + id)
          .toPromise()
          .then(x => {
            console.log(x);
          });
        await someResp;
        console.log("___");
      }
    };
    someFunc();

    //With observables
    let sub = this.dumySubject.subscribe(x => {
      console.log("in");
      if (currentIndex > 5) {
        sub.unsubscribe();
      }
      this.http
        .get("https://jsonplaceholder.typicode.com/posts/" + currentIndex)
        .pipe(first())
        .subscribe(x => {
          console.log(x);
          console.log("________");
          currentIndex++;
          this.dumySubject.next();
        });
    });
    this.dumySubject.next();

    console.log("i m the first line");
  }
}