实现一个洋葱模型

当你想要使用原生JavaScript实现一个简单的洋葱模型时，你可以按照以下方式编写代码：

// 定义中间件函数1
const middleware1 = async (ctx, next) => {
    console.log('Middleware 1 - before next');
    await next();
    console.log('Middleware 1 - after next');
};

// 定义中间件函数2
const middleware2 = async (ctx, next) => {
    console.log('Middleware 2 - before next');
    await next();
    console.log('Middleware 2 - after next');
};

// 定义中间件函数3
const middleware3 = async (ctx, next) => {
    console.log('Middleware 3 - before next');
    await next();
    console.log('Middleware 3 - after next');
};

// 实现洋葱模型
const onionModel = async (ctx, middlewares) => {
    const dispatch = async (i) => {
        if (i < middlewares.length) {
            await middlewares[i](ctx, async () => {
                await dispatch(i + 1);
            });
        }
    };

    await dispatch(0);
};

// 模拟上下文对象
const ctx = {};

// 调用洋葱模型
onionModel(ctx, [middleware1, middleware2, middleware3])
    .then(() => {
        console.log('End - Onion Model');
    })
    .catch((err) => {
        console.error(err);
    });

在这个示例中，我们定义了三个中间件函数middleware1、middleware2和middleware3，然后编写了一个onionModel函数来实现洋葱模型。onionModel函数接受一个上下文对象和中间件数组作为参数，然后按照洋葱模型的方式依次调用每个中间件函数。

你可以运行这段代码来观察中间件函数的执行顺序和日志输出。这个示例展示了如何使用原生JavaScript实现一个简单的洋葱模型，不依赖于任何框架。