异步流程控制的几种模式

JavaScript 作为一门单线程语言，异步编程是其核心特性之一。随着应用复杂度的提升，如何优雅地控制异步流程成为了开发者必须掌握的技能。本文将介绍 JavaScript 中几种常见的异步流程控制模式。

1. 回调函数（Callback）

回调函数是最基础的异步控制模式，通过将函数作为参数传递给异步操作，在操作完成后执行。

javascript 复制代码

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

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

缺点：容易导致"回调地狱"（Callback Hell），代码难以阅读和维护。

2. Promise

Promise 是 ES6 引入的异步解决方案，提供了更清晰的链式调用方式。

javascript 复制代码

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // 1秒后输出 "Data received"
    return 'Processed ' + data;
  })
  .then(processedData => {
    console.log(processedData); // 输出 "Processed Data received"
  });

优点：解决了回调地狱问题，错误处理更直观（通过 .catch()）。

3. Async/Await

ES2017 引入的语法糖，让异步代码看起来像同步代码。

javascript 复制代码

async function processData() {
  try {
    const data = await fetchData();
    console.log(data); // 1秒后输出 "Data received"
    const processedData = 'Processed ' + data;
    console.log(processedData); // 输出 "Processed Data received"
  } catch (error) {
    console.error('Error:', error);
  }
}

processData();

优点：代码更简洁易读，错误处理使用 try/catch 结构。

4. 发布/订阅模式（Pub/Sub）

通过事件驱动的方式管理异步流程。

javascript 复制代码

const EventEmitter = require('events');
const emitter = new EventEmitter();

emitter.on('dataReceived', (data) => {
  console.log(data);
});

setTimeout(() => {
  emitter.emit('dataReceived', 'Data received');
}, 1000);

适用场景：组件间松耦合通信，多个监听器需要响应同一事件。

5. Generator 函数

ES6 引入的 Generator 可以暂停和恢复函数执行，配合 Promise 可实现类似 async/await 的效果。

javascript 复制代码

function* fetchDataGenerator() {
  const data = yield new Promise(resolve => {
    setTimeout(() => resolve('Data received'), 1000);
  });
  console.log(data);
}

const generator = fetchDataGenerator();
const promise = generator.next().value;
promise.then(data => generator.next(data));

注意：现在大多被 async/await 替代，但在某些库（如 Redux-Saga）中仍有应用。

6. 异步队列控制

对于需要控制并发量的场景，可以使用异步队列。

javascript 复制代码

class AsyncQueue {
  constructor(concurrency = 1) {
    this.concurrency = concurrency;
    this.running = 0;
    this.queue = [];
  }

  add(task) {
    return new Promise((resolve, reject) => {
      this.queue.push(() => {
        return task().then(resolve, reject);
      });
      this.next();
    });
  }

  next() {
    while (this.running < this.concurrency && this.queue.length) {
      const task = this.queue.shift();
      task().finally(() => {
        this.running--;
        this.next();
      });
      this.running++;
    }
  }
}

// 使用示例
const queue = new AsyncQueue(2); // 并发数为2
// 添加任务...

总结

选择哪种异步流程控制模式取决于具体场景：

简单场景：回调函数或 Promise
复杂异步逻辑：async/await
事件驱动架构：发布/订阅模式
特殊需求：Generator 或自定义队列

随着 JavaScript 的发展，async/await 因其简洁性已成为大多数场景的首选，但理解各种模式的原理和适用场景对于成为高级 JavaScript 开发者至关重要。