Implement async middleware chain javascript

Medium

You need to implement a middleware system that processes requests in order and can handle both synchronous and asynchronous middleware. What's the correct implementation?

JavascriptMiddlewareAsync awaitCompositionError handling

1class MiddlewareChain {
2  constructor() {
3    this.middlewares = [];
4  }
5
6  use(middleware) {
7    this.middlewares.push(middleware);
8    return this;
9  }
10
11  // Missing implementation
12  execute(context) {
13    ____________________
14    ____________________
15    ____________________
16    ____________________
17  }
18}
19
20// Usage:
21const chain = new MiddlewareChain();
22
23chain.use(async (ctx, next) => {
24  console.log('Start');
25  ctx.start = Date.now();
26  await next();
27  console.log(`Time: ${Date.now() - ctx.start}ms`);
28});
29
30chain.use(async (ctx, next) => {
31  ctx.data = await fetchData();
32  await next();
33});
34
35const context = { params: { id: 1 } };
36await chain.execute(context);

You need to implement a middleware system that processes requests in order and can handle both synchronous and asynchronous middleware. What's the correct implementation?

Hint