阅读 1683

koa2统一接口返回格式导致接口异常的问题记录

背景

最近在使用vue+koa2+mysql搭建博客,在后台搭建的时候为了想让以后接口返回有一个统一的格式,所以自己写了一个中间件来统一一下,具体代码如下:

/**
 * responseBody.js
 * @description 统一接口返回格式
 * @param {*} option 
 */
const reponseBody = (option = {}) => {
  return (ctx, next) => {
    ctx.success = (data, type) => {
      ctx.type = type || option.type || 'json'
      ctx.body = {
        code: option.successCode || '000000',
        msg: option.successMsg || '调用成功',
        data
      }
    }
    ctx.fail = (msg, code) => {
      ctx.type = option.type || 'json'
      ctx.body = {
        code: option.failCode || code || '000001',
        msg: msg || option.failMsg || '调用失败'
      }
    }
    next()
  }
}

module.exports = reponseBody

复制代码
/**
 * app.js
 */
const Koa = require('koa')
const app = new Koa()
const reponseBody = require('./middleware/reponseBody')

// 使用中间件处理404
app.use(async(ctx, next) => {
  // 调用next执行下一个中间件
  await next()
  if (ctx.status === 404) {
    ctx.response.type = 'html'
    ctx.body = '404'
  }
})

// 统一接口返回格式中间件
app.use(reponseBody())
复制代码

然后我写了一个图片上传的接口

// 上传图片
router.post('/upload', uploaded.single('file'), async(ctx, next) => {
  const file = ctx.req.file
  ctx.success({
    imgSrc: `${file.destination}/${file.filename}`
  })
  console.log('ctx.body', ctx.body)
})
复制代码

上面打印的地方能够打印出body数据来

但是,在浏览器上的表现如下

接口可以调通,并且code码为200,但是preview中查看返回内容时并没有像后台打印中一样的数据,而是

404,看情况是被上一个处理404的中间件给劫持并且返回了这个内容了

。。。
。。。
。。。
这个地方折腾了好久,感觉自己的逻辑是没有问题的最后发现在中间件中调用next()前面都需要加上await,包含await的方法需要加上async,而我上面写的responseBody两个都没有,所以导致出现了这个问题,加上后就没有问题了

文章分类
前端
文章标签