异步流程控制

异步流程控制的必要性

JavaScript作为单线程语言，处理异步操作时面临回调地狱、错误处理困难等问题。随着应用复杂度提升，如何优雅地管理异步流程成为关键挑战。从早期的回调函数到现代的async/await，JavaScript社区发展出多种解决方案。

回调函数模式

最基本的异步控制方式是通过回调函数。当异步操作完成时，调用预先定义的回调函数继续执行后续逻辑。

function fetchData(callback) {
  setTimeout(() => {
    callback('Data received');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // 1秒后输出"Data received"
});

这种模式在简单场景下有效，但当多个异步操作需要顺序执行时，会产生"回调地狱"：

getUser(userId, (user) => {
  getOrders(user.id, (orders) => {
    getOrderDetails(orders[0].id, (details) => {
      updateInventory(details.items, () => {
        console.log('All operations completed');
      });
    });
  });
});

Promise解决方案

ES6引入Promise对象，提供了更结构化的异步处理方式。Promise代表一个异步操作的最终完成或失败及其结果值。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
      // 或 reject(new Error('Failed to fetch data'));
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Promise链可以扁平化嵌套的回调：

getUser(userId)
  .then(user => getOrders(user.id))
  .then(orders => getOrderDetails(orders[0].id))
  .then(details => updateInventory(details.items))
  .then(() => console.log('All operations completed'))
  .catch(error => console.error('Error occurred:', error));

Promise还提供了一些实用方法：

// 并行执行
Promise.all([fetchUser(), fetchOrders()])
  .then(([user, orders]) => {
    console.log(user, orders);
  });

// 竞速模式
Promise.race([fetchFromAPI(), fetchFromCache()])
  .then(firstResult => {
    console.log('First response:', firstResult);
  });

Generator与协程

ES6 Generator函数可以暂停和恢复执行，配合Promise可实现类似同步代码的异步流程控制。

function* asyncGenerator() {
  try {
    const user = yield getUser(userId);
    const orders = yield getOrders(user.id);
    const details = yield getOrderDetails(orders[0].id);
    yield updateInventory(details.items);
    console.log('All operations completed');
  } catch (error) {
    console.error('Error:', error);
  }
}

// 需要运行器函数配合
function runGenerator(gen) {
  const iterator = gen();
  
  function iterate(iteration) {
    if (iteration.done) return iteration.value;
    return Promise.resolve(iteration.value)
      .then(x => iterate(iterator.next(x)))
      .catch(e => iterate(iterator.throw(e)));
  }
  
  return iterate(iterator.next());
}

runGenerator(asyncGenerator);

async/await语法糖

ES2017引入async/await，基于Promise和Generator的语法糖，使异步代码看起来像同步代码。

async function processOrder() {
  try {
    const user = await getUser(userId);
    const orders = await getOrders(user.id);
    const details = await getOrderDetails(orders[0].id);
    await updateInventory(details.items);
    console.log('All operations completed');
  } catch (error) {
    console.error('Error:', error);
  }
}

processOrder();

async函数总是返回Promise，可以与其他Promise API结合使用：

async function fetchAllData() {
  const [user, orders] = await Promise.all([
    getUser(userId),
    getOrders(userId)
  ]);
  return { user, orders };
}

错误处理策略

异步流程中的错误处理需要特别注意：

// Promise的错误处理
fetchData()
  .then(data => process(data))
  .catch(error => handleError(error))
  .finally(() => cleanup());

// async/await的错误处理
async function safeFetch() {
  try {
    const data = await fetchData();
    return process(data);
  } catch (error) {
    handleError(error);
  } finally {
    cleanup();
  }
}

// 高阶函数封装
function withErrorHandling(fn) {
  return async (...args) => {
    try {
      return await fn(...args);
    } catch (error) {
      console.error('Error in', fn.name, error);
      throw error;
    }
  };
}

const safeProcessOrder = withErrorHandling(processOrder);

高级控制模式

复杂场景下可能需要更精细的控制：

// 带超时的异步操作
async function fetchWithTimeout(url, timeout) {
  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 (error) {
    clearTimeout(timeoutId);
    throw new Error(`Request timed out after ${timeout}ms`);
  }
}

// 重试机制
async function retry(fn, retries = 3, delay = 1000) {
  try {
    return await fn();
  } catch (error) {
    if (retries <= 0) throw error;
    await new Promise(resolve => setTimeout(resolve, delay));
    return retry(fn, retries - 1, delay * 2);
  }
}

// 并发控制
async function parallelWithLimit(tasks, limit) {
  const results = [];
  const executing = new Set();
  
  for (const task of tasks) {
    const p = task().then(result => {
      executing.delete(p);
      return result;
    });
    
    executing.add(p);
    results.push(p);
    
    if (executing.size >= limit) {
      await Promise.race(executing);
    }
  }
  
  return Promise.all(results);
}

事件驱动与响应式编程

Node.js的事件驱动模型和RxJS等库提供了另一种异步处理范式：

// EventEmitter示例
const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();

myEmitter.on('event', (data) => {
  console.log('Event received:', data);
});

myEmitter.emit('event', { message: 'Hello' });

// RxJS示例
import { fromEvent, interval } from 'rxjs';
import { throttleTime, map, scan } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
    throttleTime(1000),
    map(event => event.clientX),
    scan((count, clientX) => count + clientX, 0)
  )
  .subscribe(count => console.log(`Sum of X coordinates: ${count}`));

Web Worker与多线程

对于CPU密集型任务，可以使用Web Worker实现真正的并行执行：

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ command: 'calculate', data: largeDataSet });

worker.onmessage = (event) => {
  console.log('Result:', event.data.result);
};

// worker.js
self.onmessage = (event) => {
  if (event.data.command === 'calculate') {
    const result = performComplexCalculation(event.data.data);
    self.postMessage({ result });
  }
};

性能优化考虑

异步流程控制中的性能优化技巧：

// 预加载数据
async function prefetchResources() {
  const prefetchPromises = [
    fetch('/api/user').then(r => r.json()),
    fetch('/api/products').then(r => r.json())
  ];
  
  // 不等待，让它们在后台加载
  return Promise.allSettled(prefetchPromises);
}

// 懒加载
function lazyLoadModule() {
  let modulePromise = null;
  
  return async function() {
    if (!modulePromise) {
      modulePromise = import('./heavyModule.js');
    }
    return modulePromise;
  };
}

// 缓存策略
function createCachedFetch() {
  const cache = new Map();
  
  return async function(url) {
    if (cache.has(url)) {
      return cache.get(url);
    }
    
    const response = await fetch(url);
    const data = await response.json();
    cache.set(url, data);
    return data;
  };
}