compose middleware

const compose = (...middlewares) =>
  (middlewares || []).reverse().reduce(
    (dispatch, middleware) => {
      return async (ctx, next) => {
        return await middleware(ctx, async () => await dispatch(ctx, next));
      };
    },
    async (ctx, next) => await next?.(ctx)
  );

Satisfy the law of combination

const loader = compose(
    async (ctx, next) => {
        console.log(1, ctx.name);
        await next();
        console.log(6, ctx.name);
    },
    async (ctx, next) => {
        console.log(2, ctx.name);
        await next();
        console.log(5, ctx.name);
    },
    async (ctx, next) => {
        console.log(3, ctx.name);
        await next();
        console.log(4, ctx.name);
    }
);
const loader1 = compose(
    async (ctx, next) => {
        console.log("1-1", ctx.name);
        await next();
        console.log("1-6", ctx.name);
    },
    async (ctx, next) => {
        console.log("1-2", ctx.name);
        await next();
        console.log("1-5", ctx.name);
    },
    async (ctx, next) => {
        console.log("1-3", ctx.name);
        await next();
        console.log("1-4", ctx.name);
    }
);
// compose return  another middleware
const loader2 = compose(loader, loader1);
const loader3 = compose(loader, loader1, loader2);
const loader4 = compose(loader, loader1, loader2, loader3);
const loader5 = compose(loader, loader1, loader2, loader3, loader4);

loader5({name:1},(ctx)=>{
    console.log("middle",ctx)
})