JavaScript异步编程：Promise核心原理与最佳实践

1. 异步编程的演进与Promise的核心价值

JavaScript作为一门单线程语言，异步编程是其最重要的特性之一。早期的回调函数（Callback）虽然解决了异步问题，但很快暴露出了著名的"回调地狱"（Callback Hell）问题。想象一下，当你需要依次执行多个异步操作时，代码会变成这样：

javascript复制getData(function(a){
    getMoreData(a, function(b){
        getMoreData(b, function(c){ 
            getMoreData(c, function(d){
                // 更多嵌套...
            });
        });
    });
});

这种金字塔式的代码结构不仅难以阅读和维护，错误处理也变得异常复杂。Promise的出现彻底改变了这一局面，它通过链式调用（Chaining）的方式让异步代码拥有了近乎同步的可读性：

javascript复制getData()
  .then(a => getMoreData(a))
  .then(b => getMoreData(b))
  .then(c => getMoreData(c))
  .catch(err => console.error(err));

Promise的核心价值在于：

1. 状态确定性：一个Promise只能从pending变为fulfilled或rejected，且状态不可逆
2. 可组合性：通过.then()方法可以轻松组合多个异步操作
3. 错误冒泡：错误可以沿着Promise链一直传递，直到被捕获

重要提示：Promise不是异步操作的替代品，而是管理异步操作的一种更优雅的方式。它本质上是一个包装器，将异步操作的结果标准化。

2. Promise的三大状态与微任务机制

2.1 深入理解三种状态

Promise的状态机模型是其最基础也最重要的特性：

1. Pending（待定）：初始状态，表示异步操作尚未完成
   • 此时可以添加回调函数（通过.then/.catch）
2. Fulfilled（已兑现）：操作成功完成
   • 通过resolve(value)触发
   • 会调用通过.then()注册的成功回调
3. Rejected（已拒绝）：操作失败
   • 通过reject(reason)触发
   • 会调用通过.catch()或.then的第二个参数注册的失败回调

状态转换的关键规则：

• 状态一旦改变（pending → fulfilled 或 pending → rejected）就不可逆转
• 一个Promise只能被resolve或reject一次

javascript复制const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('成功');
    } else {
      reject('失败');
    }
  }, 1000);
});

// 状态监听
promise
  .then(value => console.log('成功:', value))
  .catch(reason => console.log('失败:', reason));

2.2 微任务（Microtask）与事件循环

理解Promise的执行时机对避免竞态条件至关重要。Promise的回调属于微任务，与setTimeout等宏任务有本质区别：

经典面试题示例：

javascript复制console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// 输出顺序：1 → 4 → 3 → 2

实际经验：在Vue等框架中，DOM更新也是微任务。如果你在修改数据后立即访问DOM，可能会遇到"获取不到最新DOM"的问题，这时可以使用Vue.nextTick()。

3. Promise核心API深度解析

3.1 实例方法：构建异步流水线

.then(onFulfilled, onRejected)

• 接收两个可选参数（成功回调和失败回调）
• 返回一个新的Promise，支持链式调用
• 如果回调函数返回非Promise值，会自动包装为fulfilled Promise
• 如果回调函数抛出异常，返回的Promise会变为rejected

javascript复制fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Network error');
    return response.json();
  })
  .then(data => processData(data))
  .catch(error => showError(error));

.catch(onRejected)

• 专门处理错误的语法糖，相当于.then(null, onRejected)
• 会捕获链中所有未被处理的rejection
• 实践中建议总是以.catch()结束Promise链

.finally(onFinally)

• 无论成功失败都会执行
• 适合执行清理操作（如关闭加载状态）
• 不接收任何参数，无法知道最终状态
• 返回的Promise会保持原始状态和值

javascript复制let isLoading = true;

fetch('/api/data')
  .then(/*...*/)
  .catch(/*...*/)
  .finally(() => {
    isLoading = false; // 一定会执行
  });

3.2 静态方法：高级并发控制

Promise.all(iterable)

• 接收一个可迭代对象（通常是Promise数组）
• 所有Promise都成功时返回结果数组（顺序与输入一致）
• 任何一个Promise失败则立即reject
• 适用场景：多个相互依赖的异步操作

javascript复制// 获取用户信息和用户订单
const [userInfo, userOrders] = await Promise.all([
  fetch('/user/info'),
  fetch('/user/orders')
]);

Promise.allSettled(iterable)

• 等待所有Promise完成（无论成功失败）
• 返回包含每个Promise结果的对象数组
• 每个结果对象包含status和value/reason
• 适用场景：需要知道每个异步操作最终状态的批量操作

javascript复制const results = await Promise.allSettled([
  fetch('/api1'),
  fetch('/api2'),
  fetch('/api3')
]);

results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log('成功:', result.value);
  } else {
    console.log('失败:', result.reason);
  }
});

Promise.race(iterable)

• 返回第一个settled的Promise（无论成功失败）
• 其他Promise的结果会被忽略
• 适用场景：超时控制

javascript复制// 设置5秒超时
const timeout = new Promise((_, reject) => {
  setTimeout(() => reject(new Error('超时')), 5000);
});

try {
  const data = await Promise.race([
    fetch('/api/data'),
    timeout
  ]);
} catch (err) {
  console.error(err); // 可能是网络错误或超时错误
}

Promise.any(iterable)

• 返回第一个fulfilled的Promise
• 只有所有Promise都rejected才会reject
• 与race的区别：会忽略rejected，直到找到第一个fulfilled
• 适用场景：多镜像源选择最快的可用响应

javascript复制// 尝试从多个CDN加载资源
const resource = await Promise.any([
  fetch('https://cdn1.example.com/data.json'),
  fetch('https://cdn2.example.com/data.json'),
  fetch('https://cdn3.example.com/data.json')
]);

4. 实战中的常见陷阱与解决方案

4.1 静默失败的预防策略

Promise最危险的特性就是错误可能被"静默吞没"。以下代码看起来没问题，但实际上隐藏着严重风险：

javascript复制function fetchData() {
  return fetch('/api/data')
    .then(response => response.json());
}

// 调用时没有错误处理
fetchData().then(data => console.log(data));

解决方案1：全局捕获未处理的rejection

javascript复制// 浏览器环境
window.addEventListener('unhandledrejection', event => {
  console.error('未处理的Promise错误:', event.reason);
  event.preventDefault(); // 阻止默认错误输出
});

// Node.js环境
process.on('unhandledRejection', (reason, promise) => {
  console.error('未处理的Promise:', reason);
});

解决方案2：使用async/await的try-catch

javascript复制async function getData() {
  try {
    const response = await fetch('/api/data');
    return await response.json();
  } catch (error) {
    console.error('获取数据失败:', error);
    throw error; // 继续向上抛出
  }
}

4.2 避免Promise嵌套地狱

虽然Promise解决了回调地狱，但不正确的使用方式仍会导致类似问题：

javascript复制// ❌ 反模式：Promise嵌套
getUser(userId).then(user => {
  getOrders(user.id).then(orders => {
    getProducts(orders[0].id).then(product => {
      // 更深层次的嵌套...
    });
  });
});

正确做法1：扁平化链式调用

javascript复制getUser(userId)
  .then(user => getOrders(user.id))
  .then(orders => getProducts(orders[0].id))
  .then(product => /* 处理产品 */)
  .catch(error => console.error(error));

正确做法2：使用async/await

javascript复制async function fetchUserData(userId) {
  const user = await getUser(userId);
  const orders = await getOrders(user.id);
  const product = await getProducts(orders[0].id);
  return product;
}

4.3 返回值丢失问题

Promise链中最常见的错误就是忘记return：

javascript复制// ❌ 下一个then会收到undefined
getUser()
  .then(user => {
    getOrders(user.id); // 忘记return!
  })
  .then(orders => {
    console.log(orders); // undefined
  });

解决方案：确保每个回调都有返回值

javascript复制getUser()
  .then(user => {
    return getOrders(user.id); // 显式return
  })
  .then(orders => {
    console.log(orders); // 正常获取订单
  });

或者在箭头函数中简化：

javascript复制getUser()
  .then(user => getOrders(user.id)) // 隐式return
  .then(orders => console.log(orders));

5. TypeScript中的Promise最佳实践

5.1 严格的类型定义

避免使用Promise<any>，明确定义返回类型：

typescript复制interface User {
  id: number;
  name: string;
  email: string;
}

// ✅ 明确定义返回类型
function fetchUser(id: number): Promise<User> {
  return fetch(`/api/users/${id}`).then(res => res.json());
}

// 使用时获得完整的类型推断
const user = await fetchUser(1);
console.log(user.name); // 正确推断为string

5.2 异步循环的正确方式

在TS中处理异步循环需要特别注意：

错误示例：

typescript复制// ❌ forEach中的await不会按预期工作
users.forEach(async user => {
  await sendEmail(user.email); // 不会等待
});

正确做法1：for...of（串行执行）

typescript复制async function notifyUsers(users: User[]) {
  for (const user of users) {
    await sendEmail(user.email); // 会等待每个邮件发送完成
  }
}

正确做法2：Promise.all（并行执行）

typescript复制async function notifyUsers(users: User[]) {
  await Promise.all(
    users.map(user => sendEmail(user.email))
  );
}

5.3 高级类型：Promise工具类型

TS提供了一些内置工具类型来处理Promise：

typescript复制// 提取Promise的包裹类型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// 示例
const userPromise: Promise<User> = fetchUser(1);
type UserType = UnwrapPromise<typeof userPromise>; // 得到User类型

// 更简洁的方式：使用Awaited（TS 4.5+）
type UserType = Awaited<typeof userPromise>;

6. 企业级应用的最佳实践

6.1 可组合的异步函数设计

良好的Promise函数应该具备可组合性：

typescript复制// ✅ 良好的设计：纯函数，明确输入输出
async function getUserWithOrders(userId: number): Promise<[User, Order[]]> {
  const user = await fetchUser(userId);
  const orders = await fetchOrders(user.id);
  return [user, orders];
}

// 使用时可以轻松组合
async function getUserDashboard(userId: number) {
  const [user, orders] = await getUserWithOrders(userId);
  const notifications = await fetchNotifications(user.id);
  
  return { user, orders, notifications };
}

6.2 性能优化：并行与串行的选择

错误示例：不必要的串行await

typescript复制// ❌ 顺序执行，耗时较长
const user = await fetchUser();
const orders = await fetchOrders(); // 等待用户获取完成后才开始

正确做法：无依赖关系的请求并行执行

typescript复制// ✅ 并行执行
const [user, orders] = await Promise.all([
  fetchUser(),
  fetchOrders()
]);

进阶模式：部分并行

typescript复制async function loadDashboard() {
  // 第一步：并行加载基础数据
  const [user, config] = await Promise.all([
    fetchUser(),
    fetchConfig()
  ]);

  // 第二步：依赖user.id的数据并行加载
  const [orders, messages] = await Promise.all([
    fetchOrders(user.id),
    fetchMessages(user.id)
  ]);

  return { user, config, orders, messages };
}

6.3 取消与超时控制

原生Promise不支持取消，但可以通过AbortController实现：

typescript复制async function fetchWithTimeout(url: string, timeout: number = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, {
      signal: controller.signal
    });
    clearTimeout(timeoutId);
    return response.json();
  } catch (err) {
    clearTimeout(timeoutId);
    if (err.name === 'AbortError') {
      throw new Error(`请求超时: ${timeout}ms`);
    }
    throw err;
  }
}

6.4 错误处理策略

企业级应用需要统一的错误处理：

typescript复制// 定义业务错误类型
class AppError extends Error {
  constructor(
    public code: string,
    message: string,
    public details?: any
  ) {
    super(message);
  }
}

// 包装API调用
async function apiCall<T>(fn: () => Promise<T>): Promise<T> {
  try {
    return await fn();
  } catch (error) {
    if (error instanceof AppError) {
      // 已知业务错误
      console.warn(`业务错误: ${error.code}`, error.details);
      throw error;
    } else if (error instanceof TypeError) {
      // 网络错误等
      console.error('网络错误:', error);
      throw new AppError('NETWORK_ERROR', '网络连接异常');
    } else {
      // 未知错误
      console.error('未知错误:', error);
      throw new AppError('UNKNOWN', '系统异常');
    }
  }
}

// 使用示例
async function fetchProducts() {
  return apiCall(async () => {
    const res = await fetch('/api/products');
    if (!res.ok) {
      throw new AppError('API_ERROR', '接口返回错误', { status: res.status });
    }
    return res.json();
  });
}

7. 深入理解Promise实现原理

7.1 手写简化版Promise

理解Promise的最好方式就是自己实现一个简化版：

javascript复制class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });

    return promise2;
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 简化实现，完整版需要处理更多边界情况
  if (x === promise2) {
    return reject(new TypeError('循环引用'));
  }
  if (x instanceof MyPromise) {
    x.then(resolve, reject);
  } else {
    resolve(x);
  }
}

7.2 Promise与生成器的关系

async/await实际上是Generator和Promise的语法糖：

javascript复制// 模拟async/await
function asyncGenerator(generatorFunc) {
  return function (...args) {
    const generator = generatorFunc.apply(this, args);

    return new Promise((resolve, reject) => {
      function step(key, arg) {
        let result;
        try {
          result = generator[key](arg);
        } catch (err) {
          return reject(err);
        }

        const { value, done } = result;
        if (done) {
          return resolve(value);
        }

        return Promise.resolve(value).then(
          val => step('next', val),
          err => step('throw', err)
        );
      }

      step('next');
    });
  };
}

// 使用示例
const fetchData = asyncGenerator(function* () {
  const user = yield fetch('/user').then(res => res.json());
  const orders = yield fetch(`/orders?userId=${user.id}`).then(res => res.json());
  return orders;
});

fetchData().then(orders => console.log(orders));

8. 前沿应用与性能优化

8.1 Promise内存泄漏防范

长时间挂起的Promise可能导致内存泄漏：

javascript复制// 潜在的内存泄漏
let pendingPromise;
function fetchData() {
  pendingPromise = fetch('/api/data'); // 全局变量持有Promise引用
}

// 解决方案1：及时清理
function fetchData() {
  const controller = new AbortController();
  const promise = fetch('/api/data', { signal: controller.signal });
  
  // 超时或组件卸载时取消
  setTimeout(() => controller.abort(), 5000);
  return promise;
}

// 解决方案2：使用WeakRef
const promiseCache = new Map();
function getData(key) {
  if (promiseCache.has(key)) {
    const ref = promiseCache.get(key);
    const promise = ref.deref();
    if (promise) return promise;
  }

  const promise = fetch(`/api/${key}`);
  promiseCache.set(key, new WeakRef(promise));
  return promise;
}

8.2 Promise池（Promise Pool）控制并发

处理大量并行请求时需要限制并发数：

javascript复制async function promisePool(tasks, concurrency = 5) {
  const results = [];
  const executing = new Set();
  
  for (const task of tasks) {
    if (executing.size >= concurrency) {
      await Promise.race(executing);
    }

    const p = task().then(result => {
      executing.delete(p);
      return result;
    });
    
    executing.add(p);
    results.push(p);
  }

  return Promise.all(results);
}

// 使用示例
const urls = [...Array(100)].map((_, i) => `https://example.com/data/${i}`);
const tasks = urls.map(url => () => fetch(url).then(res => res.json()));

await promisePool(tasks, 10); // 最大并发10

8.3 可视化调试技巧

使用console.log调试Promise链：

javascript复制// 简单的日志包装器
function trace(promise, name) {
  return promise.then(
    value => {
      console.log(`[${name}] Fulfilled:`, value);
      return value;
    },
    error => {
      console.error(`[${name}] Rejected:`, error);
      throw error;
    }
  );
}

// 使用示例
fetch('/api/data')
  .then(res => trace(res.json(), 'parseJSON'))
  .then(data => trace(processData(data), 'process'))
  .catch(err => console.error('Final error:', err));

9. 生态系统与工具推荐

9.1 常用Promise库

1. Bluebird：
   • 性能优化版Promise实现
   • 提供丰富的附加方法（.map, .filter等）
   • 支持取消和超时控制

javascript复制const Promise = require('bluebird');

// 超时控制
Promise.delay(1000).timeout(500)
  .then(() => console.log('完成'))
  .catch(Promise.TimeoutError, e => console.log('超时'));

// 映射控制
Promise.map([1, 2, 3], async n => n * 2, { concurrency: 2 });

2. p-retry：
   • 自动重试失败的Promise
   • 可配置重试次数和退避策略

javascript复制const pRetry = require('p-retry');

async function fetchWithRetry() {
  const response = await fetch('https://example.com');
  if (!response.ok) throw new Error('请求失败');
  return response.json();
}

// 最多重试5次，使用指数退避
const data = await pRetry(fetchWithRetry, {
  retries: 5,
  onFailedAttempt: error => {
    console.log(`第${error.attemptNumber}次尝试失败，还剩${error.retriesLeft}次`);
  }
});

9.2 测试工具

1. Jest异步测试：
   • 支持Promise和async/await测试
   • 提供.resolves/.rejects匹配器

javascript复制test('fetchData返回用户数据', async () => {
  await expect(fetchData()).resolves.toMatchObject({
    id: expect.any(Number),
    name: expect.any(String)
  });
});

test('无效ID抛出错误', async () => {
  await expect(fetchData(-1)).rejects.toThrow('无效的用户ID');
});

2. Sinon模拟异步：
   • 创建假定时器和Promise
   • 测试异步代码的时序行为

javascript复制import sinon from 'sinon';

test('异步操作时序', async () => {
  const clock = sinon.useFakeTimers();
  const promise = delay(1000).then(() => 'done');
  
  clock.tick(999);
  await expect(promise).toBePending(); // 自定义匹配器
  
  clock.tick(1);
  await expect(promise).resolves.toBe('done');
  
  clock.restore();
});

10. 终极实践指南

10.1 黄金法则清单

1. 错误处理：

   • 每个Promise链必须以.catch()结束
   • 或者用try/catch包裹await
   • 设置全局unhandledrejection监听器

2. 性能优化：

   • 无依赖的Promise使用Promise.all并行执行
   • 避免不必要的await嵌套
   • 大数据集使用Promise池控制并发

3. 代码可读性：

   • 优先使用async/await处理复杂逻辑
   • 保持Promise链扁平化
   • 为异步函数添加清晰的JSDoc注释

4. 类型安全：

   • 避免Promise
   • 明确定义异步函数的返回类型
   • 使用Awaited提取Promise包裹类型

10.2 代码审查要点

审查Promise代码时关注这些常见问题：

1. 未处理的rejection：

   javascript复制// ❌ 缺少错误处理
   fetchData().then(data => console.log(data));
   

2. 不必要的串行：

   javascript复制// ❌ 可以并行执行
   const a = await getA();
   const b = await getB();
   

3. 嵌套过深：

   javascript复制// ❌ 应扁平化
   getA().then(a => {
     getB(a).then(b => {
       getC(b).then(c => {
         // ...
       });
     });
   });
   

4. 类型不严谨：

   typescript复制// ❌ 应明确定义返回类型
   async function getData(): Promise<any> {
     // ...
   }
   

10.3 性能优化检查表

1. 并发优化：

   • 识别无依赖的异步操作改为并行
   • 大数据集处理使用Promise池
   • 考虑使用Promise.race实现超时

2. 内存管理：

   • 避免全局变量持有Promise引用
   • 长时间操作考虑取消机制
   • 使用WeakRef缓存大型结果

3. 错误处理开销：

   • 避免在热点路径中使用try/catch
   • 预验证参数减少不必要的异步错误
   • 对可预测错误使用错误码而非异常

10.4 实战示例：API客户端封装

综合运用所有最佳实践：

typescript复制interface ApiClientOptions {
  baseURL?: string;
  timeout?: number;
  maxRetries?: number;
}

class ApiClient {
  private abortController: AbortController;
  
  constructor(private options: ApiClientOptions = {}) {
    this.options = {
      baseURL: '',
      timeout: 5000,
      maxRetries: 3,
      ...options
    };
    this.abortController = new AbortController();
  }

  async request<T>(endpoint: string, init?: RequestInit): Promise<T> {
    let lastError: Error;
    
    for (let i = 0; i < this.options.maxRetries!; i++) {
      try {
        const url = new URL(endpoint, this.options.baseURL).toString();
        const timeout = this.setupTimeout();
        
        const response = await Promise.race([
          fetch(url, {
            signal: this.abortController.signal,
            ...init
          }),
          timeout
        ]);
        
        clearTimeout(timeout);
        
        if (!response.ok) {
          throw new Error(`HTTP错误: ${response.status}`);
        }
        
        return await response.json() as T;
      } catch (error) {
        lastError = error as Error;
        if (error.name === 'AbortError') break; // 不重试取消的请求
        await this.delay(this.getBackoffDelay(i));
      }
    }
    
    throw lastError!;
  }

  cancel() {
    this.abortController.abort();
    this.abortController = new AbortController();
  }

  private setupTimeout(): Promise<never> {
    return new Promise((_, reject) => {
      setTimeout(() => {
        reject(new Error(`请求超时: ${this.options.timeout}ms`));
      }, this.options.timeout);
    });
  }

  private getBackoffDelay(attempt: number): number {
    return Math.min(1000 * 2 ** attempt, 10000);
  }

  private delay(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

// 使用示例
const api = new ApiClient({
  baseURL: 'https://api.example.com',
  timeout: 3000,
  maxRetries: 5
});

interface User {
  id: number;
  name: string;
}

try {
  const user = await api.request<User>('/users/1');
  console.log(user.name);
} catch (error) {
  console.error('API请求失败:', error);
} finally {
  api.cancel(); // 清理
}

11. 未来展望与替代方案

11.1 Promise的局限性

虽然Promise已经成为JavaScript异步编程的基石，但仍有一些局限性：

1. 取消机制：原生Promise不支持取消，需要借助AbortController
2. 进度通知：无法像Observable那样提供中间进度
3. 内存占用：长时间挂起的Promise可能导致内存泄漏
4. 复杂控制流：某些高级模式（如限流、重试）需要额外封装

11.2 新兴替代方案

1. Observable (RxJS)：
   • 更强大的流控制能力
   • 支持取消、重试、节流等操作符
   • 适合处理事件流和复杂异步场景

javascript复制import { from, fromEvent } from 'rxjs';
import { switchMap, retry, throttleTime } from 'rxjs/operators';

// 从Promise创建Observable
from(fetch('/api/data'))
  .pipe(
    retry(3),
    switchMap(response => response.json())
  )
  .subscribe(data => console.log(data));

// 事件处理
fromEvent(document, 'scroll')
  .pipe(throttleTime(200))
  .subscribe(() => console.log('滚动事件'));

2. Async Iterators：
   • 原生支持异步迭代
   • 适合处理数据流和分页
   • 可以与for-await-of语法配合使用

javascript复制async function* asyncGenerator() {
  let page = 1;
  while (true) {
    const res = await fetch(`/api/items?page=${page}`);
    const data = await res.json();
    if (data.length === 0) break;
    yield* data;
    page++;
  }
}

// 使用
for await (const item of asyncGenerator()) {
  console.log(item);
}

3. Web Workers：
   • 真正的并行执行
   • 适合CPU密集型任务
   • 通过Promise-like接口通信

javascript复制// 主线程
const worker = new Worker('task.js');
worker.postMessage({ data: 'input' });
worker.onmessage = (e) => console.log(e.data);

// task.js
self.onmessage = async (e) => {
  const result = await heavyComputation(e.data);
  self.postMessage(result);
};

11.3 如何选择

根据场景选择合适的异步方案：

12. 总结与个人经验分享

经过多年在前端和后端开发中使用Promise的经验，我总结了以下几点深刻体会：

1. 错误处理比正确流程更重要：在Promise链中，未捕获的错误可能导致整个应用静默失败。建立全局错误处理机制和编写防御性代码应该成为习惯。

2. 性能往往藏在细节里：一个不必要的await可能导致整个流程慢几倍。时刻思考哪些操作可以并行化，使用Promise.all加速独立请求。

3. 可读性是团队协作的基础：虽然Promise链和async/await都很强大，但在复杂逻辑中，适当拆分函数和添加注释比炫技更重要。

4. TypeScript是Promise的最佳搭档：良好的类型定义可以避免许多运行时错误，特别是对于复杂的异步数据流。

5. 理解原理才能用好工具：只有真正理解事件循环、微任务队列和Promise状态机，才能在各种边界情况下游刃有余。

最后分享一个我经常用来教学的真实案例：

typescript复制// 初始化时并行加载多个配置
async function initApp() {
  // 这些配置互不依赖，可以并行加载
  const [userPrefs, appConfig, featureFlags] = await Promise.all([
    loadUserPreferences(),
    loadAppConfig(),
    loadFeatureFlags()
  ]);

  // 初始化依赖于上述配置
  const authToken = await initializeAuth(userPrefs);
  
  // 这些初始化可以并行
  await Promise.all([
    initUI(appConfig),
    initAnalytics(featureFlags),
    prefetchData(authToken)
  ]);

  // 启动应用
  return startApp();
}

// 使用示例
initApp()
  .then(() => console.log('应用启动成功'))
  .catch(err => {
    console.error('启动失败:', err);
    showErrorPage(err);
  });

这个案例展示了如何合理组合串行和并行操作，既保证了必要的执行顺序，又最大化利用了并行能力。在实际项目中，这种模式可以显著提升应用启动速度。