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兩個都沒有，因此致使出現了這個問題，加上後就沒有問題了

博客地址(功能不完善)