Angular异步HTTP请求参数传递异常：store始终为0的原因及解决

问题描述 #

我想实现这样的逻辑：先等待第一个HTTP请求返回结果，把store设为1（实际是返回数据里的某个值，这里简化成1），只有当store为1时才执行第二个HTTP请求。但现在store一直是0，第二个请求根本不执行，这是为什么？怎么让第二个请求能拿到值为1的store？

示例代码：

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular';
  apiUrl = 'https://www.techiediaries.com/api/data.json';
  store: number = 0;

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    this.fetchData1();
    this.fetchData2(this.store);
  }

  private async fetchData1() {
    const data = await this.httpClient.get(this.apiUrl).toPromise();
    this.store = 1;
    console.log('Data: ' + JSON.stringify(data));
  }

  private async fetchData2(store) {
    if (store === 1) {
      const data = await this.httpClient.get(this.apiUrl).toPromise();
      console.log('Data: ' + JSON.stringify(data));
    }
  }
}

问题原因 #

• 异步执行无阻塞：fetchData1是异步函数，调用后不会暂停后续代码执行。ngOnInit中fetchData1()刚启动就立刻调用fetchData2(this.store)，此时第一个HTTP请求还未完成，store仍为初始值0，导致fetchData2的条件判断不成立。
• 值传递特性：fetchData2接收的是store的值拷贝，即便后续fetchData1将store更新为1，fetchData2内部的参数值也不会同步变化。

解决方案 #

方案一：用async/await控制执行顺序 #

修改ngOnInit为异步函数，等待fetchData1执行完成后再调用fetchData2，确保store已被更新：

async ngOnInit() {
  await this.fetchData1(); // 等待第一个请求完成，store被设为1
  this.fetchData2(this.store);
}

或者直接在fetchData1完成后调用fetchData2，直接访问类的store属性，避免值传递问题：

private async fetchData1() {
  const data = await this.httpClient.get(this.apiUrl).toPromise();
  this.store = 1;
  console.log('Data: ' + JSON.stringify(data));
  this.fetchData2(); // 请求完成后直接调用第二个方法
}

private async fetchData2() {
  if (this.store === 1) { // 直接使用类的store属性
    const data = await this.httpClient.get(this.apiUrl).toPromise();
    console.log('Data: ' + JSON.stringify(data));
  }
}

ngOnInit() {
  this.fetchData1();
}

方案二：使用RxJS链式调用（Angular推荐方案） #

Angular的HttpClient原生返回Observable，RxJS提供了更强大的异步流控制能力，这是Angular项目的推荐写法：

import { HttpClient } from '@angular/common/http';
import { tap, switchMap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular';
  apiUrl = 'https://www.techiediaries.com/api/data.json';
  store: number = 0;

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    this.fetchData().subscribe();
  }

  private fetchData() {
    return this.httpClient.get(this.apiUrl).pipe(
      tap(data => {
        this.store = 1; // 第一个请求完成后更新store
        console.log('Data: ' + JSON.stringify(data));
      }),
      switchMap(() => {
        // 条件满足时发起第二个请求
        if (this.store === 1) {
          return this.httpClient.get(this.apiUrl).pipe(
            tap(data => console.log('Data: ' + JSON.stringify(data)))
          );
        }
        return []; // 条件不满足时返回空流
      })
    );
  }
}

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