Angular 2调用多个异步方法

Question

我正在开发一个移动应用程序，现在我正在进行身份验证。在我访问我的主页之前，我需要访问我构建的API上的各种endpoint，然后才能向用户显示数据。

在Postman中测试时，所有endpoint都返回了正确的数据，但是当我在应用程序中使用它时，我在第二次异步调用中得到了一个null值。

我确信这与这些呼叫的顺序有关，所以我只是在寻找一些帮助，如何在开始另一个呼叫之前正确地等待一个呼叫完成。

public login() {

this.showLoading();

this.userService.getUserIdFromUserName(this.registerCredentials.username) // WORKS
  .subscribe(
    res => {
      console.log(res);
      localStorage.setItem("UserId", res.toString());
    },
    err => {
      console.log(err);
    });

this.userService.getEmployeeIdFromUserId(localStorage.getItem("UserId")) // THIS RETURNS NULL 
  .subscribe(
    res => {
      console.log(res);
      localStorage.setItem("EmployeeId", res.toString());
    },
    err => {
      console.log(err);
    });

this.authService.login(this.registerCredentials)
  .subscribe(

    data => {
      this.loading.dismissAll();
      console.log('User logged in successfully! ', data);
      this.nav.push(TabsPage);
      localStorage.setItem("Username", this.registerCredentials.username);
      localStorage.setItem("isLoggedIn", "true");
    },

    error => {
      this.loading.dismissAll();
      this.showAlert("Uh oh!", "Something went wrong. Please re-enter your login credentials or check your connection.");
      console.log(error);
    });
  }

Answer 1

这应该行得通。别忘了导入'rxjs/Rx'

this.userService.getUserIdFromUserName(this.registerCredentials.username)
  .map(res => res.toString())
  .do(userId => {
      console.log(res);
      localStorage.setItem("UserId", userId);
    })
  .flatMap(userId => {
       return this.userService.getEmployeeIdFromUserId(userId);
     })
  .do(res => {
      console.log(res);
      localStorage.setItem("EmployeeId", res.toString());
    })

Answer 2

您的原始代码存在导致此错误的错误。您的代码中有三个调用，我称之为A）、B）和C）：

A) this.userService.getUserIdFromUserName(this.registerCredentials.username) // WORKS

B) this.userService.getEmployeeIdFromUserId(localStorage.getItem("UserId")) // THIS RETURNS NULL 

C) this.authService.login(this.registerCredentials)

关于RXJS，您需要了解的是冷可观察（表示启动异步操作所需的所有信息）和热可观察（已启动异步操作的可观察）之间的区别。

这三个调用A）、B）和C）仅构建冷的可观察对象，这些可观察对象在调用时就开始了。在它们上订阅（）。因此，在B）构建时，A）已经开始，但尚未完成。因此，调用localStorage。getItem（“UserId”）将返回null，因为A）尚未调用其订阅者的next回调。

所以你想做的是让B）等待A）。此外，与其将某物填充到全局状态（本地存储），不如将结果从A）流到B）。输入. mergeMap（）运算符：

this.userService.getUserIdFromUserName(this.registerCredentials.username) // WORKS
  .map(res => res.toString())
  .do(userId => localStorage.setItem("UserId", userId)) // cleanly separate side-effects into .do() calls
  .mergeMap(userId => this.userService.getEmployeeIdFromUserId(userId))
  .map(res => res.toString())
  .do(employeeId => localStorage.setItem("EmployeeId", employeeId))
  .subscribe(
    employeeId => {
      console.log(employeeId);      
    },
    err => {
      console.log(err);
    });

rxjs的好处在于，错误处理在可观察链中始终有效。如果可以并行执行C），请查看。forkJoin（）。

最后，如果您需要的实际解释。mergeMap（）看看这个答案：在#ngrx示例中，SwitchMap与mergeMap