如何在Angular 14中实现AngularJS $timeout的同等功能及取消逻辑？

下面提供两种实现方案，并说明各自的适用场景：

方案一：原生 setTimeout + Promise #

完全用原生API实现，逻辑和原AngularJS代码对齐，适合简单场景：

// 封装获取数据的方法，返回Promise和取消函数
function getData(): { promise: Promise<string>, cancel: () => void } {
  let timeoutId: number;
  const promise = new Promise<string>((resolve, reject) => {
    timeoutId = setTimeout(() => {
      const someCondition = true; // 替换为你的实际判断条件
      if (someCondition) {
        resolve('data received!');
      } else {
        reject('something went wrong!');
      }
    }, 2000);
  });

  return {
    promise,
    cancel: () => clearTimeout(timeoutId)
  };
}

// 调用示例
const { promise, cancel } = getData();
promise
  .then(data => console.log(data))
  .catch(err => console.error(err));

// 执行取消操作（比如组件销毁时）
// cancel();

方案二：RxJS 方案（Angular 生态推荐） #

RxJS是Angular官方推荐的异步处理方案，适合复杂异步场景或已有RxJS依赖的项目：

import { timer, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 封装返回Observable的方法
function getData(): Observable<string> {
  return timer(2000).pipe(
    map(() => {
      const someCondition = true; // 替换为你的实际判断条件
      if (someCondition) {
        return 'data received!';
      } else {
        throw new Error('something went wrong!'); // 抛出错误对应原逻辑的reject
      }
    })
  );
}

// 调用示例
const dataSubscription = getData().subscribe({
  next: data => console.log(data),
  error: err => console.error(err.message)
});

// 执行取消操作（比如组件销毁时）
// dataSubscription.unsubscribe();

方案选择建议 #

• 若只是单次简单延迟异步操作，原生setTimeout+Promise代码更简洁，无需额外依赖。
• 若业务需要扩展异步逻辑（如流组合、重试、防抖等），或项目已大量使用RxJS，优先选RxJS方案，其操作符生态能更高效处理复杂异步场景，且取消逻辑可与Angular组件生命周期（如ngOnDestroy）无缝结合。

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