Question

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

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

在上面我想添加一个在setUserInfo（）完成之前不会循环递增的逻辑。

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

Answer 1

以下两种方法可以实现结果（我不使用单独的http服务，以便将所有代码保存在一个地方）

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

使用observables ，第二个解决方案更友好，并使用rxjs Subject，这是在调用.next()方法时发出事件的对象Subject的实例。重要的是要注意我们必须在主题的某些时候取消订阅，否则我们将陷入无限循环，这不是很酷，也注意到即时通讯使用first()运算符以避免无意识的订阅

这是一个现场演示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");
  }
}

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

1 个答案: