Angular中如何让getAnXSRfToken执行完成后再发起用户数据请求？

要让getAnXSRfToken()执行完成后再发起后续HTTP请求，你需要利用RxJS的操作符串联异步流——Angular的HTTP请求返回Observable，直接调用方法后立即执行后续请求会破坏异步操作的顺序性。

1. 重构getAnXSRfToken()方法 #

不要在方法内部直接subscribe，而是返回Observable，并通过tap操作符处理token获取后的逻辑，这样才能在外部链式调用：

import { tap } from 'rxjs/operators';

getAnXSRfToken() {
  return this.http
    .post<{
      parameterName: string;
      headerName: string;
      token: string;
    }>('http://localhost:8080/user/getXSRfToken', null)
    .pipe(
      tap({
        next: (tokenData) => {
          console.log('REQ --- token ---generated ');
          console.log(tokenData.token);
          this.XSRF_TOKEN.next(tokenData.token);
        },
        error: (e) => console.log(e)
      })
    );
}

2. 修改getAllUserData()方法 #

用switchMap操作符先完成token请求，再发起用户数据请求（如果需要严格按顺序执行，也可以用concatMap）：

import { switchMap } from 'rxjs/operators';

getAllUserData() {
  return this.getAnXSRfToken().pipe(
    switchMap(() => {
      return this.http.post<User[]>('http://localhost:8080/user/get-all-users-post', null, {
        observe: 'response',
        withCredentials: true,
      });
    })
  ).subscribe({
    next: (array) => {
      this.allUsersData.next(array.body);
    },
    error: (e) => {
      console.log(e);
    },
  });
}

原代码失效原因 #

HTTP请求是异步操作，直接调用this.getAnXSRfToken()后，代码会立即执行后续的post请求，此时token请求还未完成，无法保证token已被正确获取和设置。通过RxJS操作符串联Observable，能确保前一个异步操作（token请求）完成后，才会执行下一个操作（用户数据请求）。

内容的提问来源于stack exchange，提问作者Mathew Francis