一、问题

---

最近在用 koa2 写注册接口，在调试接口的时候出现了这样一个问题：
<br />
后端自定义了 400 NotFound 错误，并且在 Http Response Body 中返回了如下结构：

"success": false
"msg": "NotFound",
"errorCode": 10000,
"request": "POST /v1/user/register",

想要测试 validator 层的功能，于是我在前端（Vue + Element-ui）写了如下代码：

/*
 * 注册
 * @param formName 表单
 */
handleRegister (formName) {
  const { account, password1, password2 } = this.form
  this.$refs[formName].validate(async (valid) => {
  if (valid) {
    const { success, msg } = await this.$api.register(account, password1, password2)
    if (success) {
      this.$message.success(msg)
    } else {
      this.$message.err(msg[0])
    }
  })
}

并故意在表单中填错了 pasword1 和 password2
在 postman 中可以正确得到预期结果：

{
  “success”: false,
  "msg": [
      "password1密码长度在6～32之间",
      "password2密码长度在6～32之间",
      "两个密码必须相同"
  ],
  "errorCode": 10000,
  "request": "POST /v1/user/register"
}

但是我们从前端会报错：

1572876136373.jpg

问题是，响应体的数据哪去了？

---

二、解决

---

这个问题我想了半天，后来发现自己魔怔了。用 await 求值相当于拿到 Promise 的 res，当然拿不到错误的响应体。修改前端代码，解决：

/*
 * 注册
 * @param formName 表单
 */
handleRegister (formName) {
  const { account, password1, password2 } = this.form
  this.$refs[formName].validate(async (valid) => {
    if (valid) {
      try {
        const { msg } = await this.$api.register(account, password1, password2)
        this.$message.success(msg)
        await this.$router.push('/')
      } catch (err) {
        // 直接打印 err 啥也看不出来
        console.log(err.response)
        this.$message.error(err.response.data.msg[0])
      }
    } else {
      return false
    }
  })
}

这时候，由于用不到判断，后端的返回体里面的 success 也没用了，去掉。