serverMiddleware does not support async/await with Koa?

[bi-kai]

"nuxt": "^2.14.12"

If I use sync code, serverMiddleware runs correctly.
But meets async/await code, koa returns directly in serverMiddleware.
I also test this with koa alone, async/await is supported.

my code is below:

//server-middleware/index.js
import Koa from 'koa'
import Router from 'koa-router'
const router = new Router()
const app = new Koa()
const apiRouter = require('./routers') // API接口路由

router.use(async (ctx, next) => {
  await console.log('in router use')
  next()
})

router.use(apiRouter.routes()).use(apiRouter.allowedMethods())
app.use(router.routes()).use(router.allowedMethods())
export default {
  path: '/api/v1/server-middleware',
  handler: app.callback()
}

//server-middleware/routers/index.js
const Router = require('koa-router')

const router = new Router({
  prefix: '/business'
})

router.get('/article', async (ctx, next) => {
  debugger
  // await console.log('in server middleware get:/business/article')
  await timer() //<------------------------------bug here-----------------------------------
  ctx.response.status = 200
  ctx.response.type = 'application/json'
  // const data = await { code: 20000, data: { goods: 1 }, message: '' }
  ctx.response.body = Object.assign({}, { code: 20000, data: { goods: 2 } })
})

function timer() {
  return new Promise(resolve => {
    setTimeout(function () {
      resolve()
    }, 3000)
  })
}
module.exports = router

curl http://localhost:3000/api/v1/server-middleware/business/article
The bug is in code: await timer():
Koa middleware returns without waitting for 3 seconds, it goes to next() in router.use() in server-middleware/index.js.
The left code in middleware router.get('/article' continus running after 3s, but the request has already been returned.

[Atinux]

Hi @bi-kai

You cannot export the koa-router to serverMiddleware, you need to create a Koa app instance, use the router, and then give back app.callback() as serverMiddleware.

const Koa = require('koa')
const Router = require('koa-router')

const app = new Koa()
const router = new Router({
  prefix: '/business'
})

router.get('/article', async (ctx, next) => {
  debugger
  // await console.log('in server middleware get:/business/article')
  await timer()
  ctx.response.status = 200
  ctx.response.type = 'application/json'
  // const data = await { code: 20000, data: { goods: 1 }, message: '' }
  ctx.response.body = Object.assign({}, { code: 20000, data: { goods: 2 } })
})

function timer() {
  return new Promise(resolve => {
    setTimeout(function () {
      resolve()
    }, 3000)
  })
}

app.use(router.routes())

module.exports = app.callback()

[bi-kai]

@Atinux Hi, I have a index.js to export koa.callback(), I reedited the question's discription.
Koa async code's behavior in serverMiddleware is different from using koa alone.

[Atinux]

Please create a reproduction on CodeSandBox using https://template.nuxtjs.org

[bi-kai]

@Atinux my question about serverMiddleware is similar to this: https://codesandbox.io/s/vigorous-gauss-eledr?file=/nuxt.config.js
the expect result is: 0 1 2 3 4 5, but it's 0 1 5 2 3 4.
await next(); does not stoped, it runs the code behind in the same function directly.

[Atinux]

@bi-kai Actually Nuxt uses connect for the server, await next() is useless since it will automatically call the next methods.

[bi-kai]

@bi-kai Actually Nuxt uses connect for the server, await next() is useless since it will automatically call the next methods.

emm..., Koa/express in serverMiddleware also can't change this behavior, right?
If so, I have no idea about how to use serverMiddleware as a real server: db, file, etc, there are lots of blocking codes.

so the conclusion is:
serverMiddleware is unsuitable for RESTful server in real project, use independent api server(koa/express,etc) instead.
is it right?

[danielroe]

@bi-kai That's not the conclusion I'd come to.

Do join the Discord server at https://discord.nuxtjs.org - I'm sure there would be lots of people happy to talk through building API endpoints in serverMiddleware.

[bi-kai]

@danielroe no one discuss my quesion on discord, Cloud you help me with this problem?

[pi0]

If so, I have no idea about how to use serverMiddleware as a real server: db, file, etc, there are lots of blocking codes.

Having blocking code is fine. We only have to call next() function at last when middleware is done: (calling next is similar to calling promise.resolve)

    {
      path: "/test",
      handler: async (req, res, next) => {
        await new Promise(r =>
          setTimeout(() => {
            console.log("1");
            r();
          }, 0)
        );
--     await next();
        await new Promise(r =>
          setTimeout(() => {
            console.log("5");
            r();
          }, 0)
        );
++     next();
      }
    },

[bi-kai]

@pi0 in my example, the code in next() is blocking code, such as reading from DB, the code after next() is ajax response, I can't change the order. serMiddleware returns directly without waitting for the blocking code.

[pi0]

This is how express/connect middleware systam works. They run sequentially and by calling next we go to next middleware we cannot come back. If you prefer splitting logic into multiple middleware:

[
  async (req, _res, next) => {
    req.data = await db.query()
    next()
  },
  (req, res) => {
    res.end('Data:' + req.data)
  }
]

or easier using single middleware to do async operation:

async (req, res, _next) => {
    const data = await db.query()
    res.end('Data:' + data)
}

[bi-kai]

@pi0 serverMiddleware is not suitable for koa/express with multi middleware(app.use or router), they all have next().
serverMiddleware can only be used for code like REST respnse with sync logic, sequence careless, am I right?