Angular中使用setTimeout模拟慢接口返回数据未达预期问题

问题原因 #

你遇到的核心问题是setTimeout是异步操作：当你在getCustomersFromAPICall里添加setTimeout后，方法会先同步执行完并返回（此时this.dataFromAPICall还没被赋值），等2秒后异步任务才会触发赋值逻辑，这时候给searchEmployeeList赋值的操作早就完成了，自然拿不到预期数据。

解决方案 #

Angular中处理异步场景，推荐用Promise或RxJS Observable（更贴合Angular生态，和HttpClient的用法一致），以下是两种具体实现：

方案1：使用Promise #

修改getCustomersFromAPICall返回Promise，在setTimeout中resolve数据：

getCustomersFromAPICall(): Promise<CustomerModel[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 替换成你的模拟数据
      const mockCustomers: CustomerModel[] = [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ];
      this.dataFromAPICall = mockCustomers;
      resolve(mockCustomers);
    }, 2000);
  });
}

调用时用async/await或then处理异步结果：

// 方式A：async/await（需要在async方法中调用）
async loadCustomerData() {
  this.searchEmployeeList = await this.getCustomersFromAPICall();
}

// 方式B：then回调
loadCustomerData() {
  this.getCustomersFromAPICall().then(data => {
    this.searchEmployeeList = data;
  });
}

方案2：使用RxJS Observable（推荐） #

利用RxJS的of创建模拟数据流，配合delay操作符实现延迟，用tap赋值给实例变量：

import { Observable, of } from 'rxjs';
import { delay, tap } from 'rxjs/operators';

// ...

getCustomersFromAPICall(): Observable<CustomerModel[]> {
  // 替换成你的模拟数据
  const mockCustomers: CustomerModel[] = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
  ];
  return of(mockCustomers).pipe(
    delay(2000),
    tap(data => this.dataFromAPICall = data) // 赋值给实例变量
  );
}

调用时通过subscribe订阅数据流：

loadCustomerData() {
  this.getCustomersFromAPICall().subscribe(data => {
    this.searchEmployeeList = data;
  });
}

为什么原写法不行？ #

原写法的逻辑是同步返回值，但setTimeout里的赋值是异步执行的，相当于：

// 错误示例
getCustomersFromAPICall(): CustomerModel[] {
  // 先执行这里，此时this.dataFromAPICall是初始值（比如undefined或空数组）
  setTimeout(() => {
    // 2秒后才会执行这里的赋值
    this.dataFromAPICall = [/* 数据 */];
  }, 2000);
  // 直接返回初始值，不是2秒后的结果
  return this.dataFromAPICall;
}

调用this.searchEmployeeList = this.getCustomersFromAPICall()时，拿到的是方法同步返回的初始值，而非延迟后的模拟数据。

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