Javascript异步流管道封装实现

写着写着就睡了
285 阅读4分钟

异步管道流（Async Pipeline），用于处理一系列异步操作。通过管道流，可以将多个异步操作串联起来，每个操作的输出作为下一个操作的输入。下面是一个简单的手写异步管道流封装示例：

1. 基本概念

  • 异步操作：每个操作都是一个返回Promise的函数。
  • 管道流：将多个异步操作串联起来，前一个操作的输出作为下一个操作的输入。

2. 实现代码

class AsyncPipeline {
  constructor() {
    this.pipeline = [];
  }

  // 添加异步操作到管道
  pipe(asyncFn) {
    this.pipeline.push(asyncFn);
    return this; // 支持链式调用
  }

  // 执行管道流
  async execute(initialValue) {
    let result = initialValue;

    for (const asyncFn of this.pipeline) {
      result = await asyncFn(result);
    }

    return result;
  }
}

// 示例使用
const asyncPipeline = new AsyncPipeline();

// 定义一些异步操作
const asyncOperation1 = async (input) => {
  console.log('Operation 1:', input);
  return input + 1;
};

const asyncOperation2 = async (input) => {
  console.log('Operation 2:', input);
  return input * 2;
};

const asyncOperation3 = async (input) => {
  console.log('Operation 3:', input);
  return input - 3;
};

// 添加操作到管道
asyncPipeline
  .pipe(asyncOperation1)
  .pipe(asyncOperation2)
  .pipe(asyncOperation3);

// 执行管道流
asyncPipeline.execute(5).then((result) => {
  console.log('Final Result:', result);
});

// 输出:
// Operation 1: 5
// Operation 2: 6
// Operation 3: 12
// Final Result: 9

3. 代码解释

  • AsyncPipeline类：封装了异步管道流的逻辑。
    • pipe(asyncFn)：用于将异步操作添加到管道中。
    • execute(initialValue)：从初始值开始，依次执行管道中的每个异步操作，并返回最终结果。
  • 异步操作：每个异步操作都是一个返回Promise的函数，接收上一个操作的输出作为输入。
  • 链式调用：通过返回this，支持链式调用pipe方法。 执行逻辑的核心代码主要在 AsyncPipeline 类的 execute 方法中。以下是 execute 方法的代码及其详细解释：

3.1 核心代码：execute 方法

async execute(initialValue) {
  let result = initialValue; // 初始化结果为初始值

  // 遍历管道中的每个异步操作
  for (const asyncFn of this.pipeline) {
    result = await asyncFn(result); // 执行当前异步操作，并等待其完成
  }

  return result; // 返回最终结果
}

3.2 代码解释

  1. let result = initialValue;:

    • 初始化 result 为传入的初始值 initialValue。
    • 这个值会作为第一个异步操作的输入。

  2. for (const asyncFn of this.pipeline):

    • 遍历 this.pipeline 数组中的每个异步操作（asyncFn）。
    • this.pipeline 是通过 pipe 方法添加的异步操作列表。

  3. result = await asyncFn(result);:

    • 执行当前的异步操作 asyncFn，并传入当前的 result 作为输入。
    • 使用 await 等待异步操作完成，并将结果赋值给 result。
    • 这个结果会作为下一个异步操作的输入。

  4. return result;:

    • 当所有异步操作执行完毕后，返回最终的 result。

3.3 执行逻辑的关键点

  • 顺序执行:

    • 管道中的异步操作会按照添加的顺序依次执行。
    • 每个操作的输出会作为下一个操作的输入。

  • 异步等待:

    • 使用 await 确保每个异步操作完成后再执行下一个操作。
    • 这种方式保证了异步操作的顺序性。

  • 结果传递:

    • 每个异步操作的返回值会更新 result，并传递给下一个操作。
    • 最终 result 是所有操作完成后的最终结果。

3.4 示例执行过程

假设管道中有以下三个异步操作：

const asyncOperation1 = async (input) => input + 1;
const asyncOperation2 = async (input) => input * 2;
const asyncOperation3 = async (input) => input - 3;

管道流如下：

asyncPipeline
  .pipe(asyncOperation1)
  .pipe(asyncOperation2)
  .pipe(asyncOperation3);

执行 asyncPipeline.execute(5) 的过程：

  1. 初始值:

    • result = 5。

  2. 执行 asyncOperation1:

    • result = await asyncOperation1(5)。
    • asyncOperation1 返回 5 + 1 = 6。
    • 更新 result = 6。

  3. 执行 asyncOperation2:

    • result = await asyncOperation2(6)。
    • asyncOperation2 返回 6 * 2 = 12。
    • 更新 result = 12。

  4. 执行 asyncOperation3:

    • result = await asyncOperation3(12)。
    • asyncOperation3 返回 12 - 3 = 9。
    • 更新 result = 9。

  5. 返回最终结果:

    • 返回 result = 9。

执行逻辑的核心是 execute 方法中的 for 循环和 await 语句：

  • for 循环：按顺序遍历管道中的每个异步操作。
  • await：确保每个异步操作完成后再执行下一个操作。
  • 结果传递：每个操作的输出作为下一个操作的输入，最终返回处理后的结果。

这种设计使得异步管道流可以清晰地处理复杂的异步任务链。

4. 使用场景

  • 数据处理：例如，从数据库中读取数据，经过一系列转换后，最终输出结果。
  • API调用：例如，调用多个API，每个API的响应作为下一个API的输入。

5. 扩展

  • 错误处理：可以在execute方法中添加try-catch块，捕获并处理异步操作中的错误。
  • 并发执行：如果需要并发执行多个异步操作，可以使用Promise.all等方法。

通过这种方式，你可以轻松地封装和管理复杂的异步操作流。

avatar
文章
阅读
粉丝