一、问题
最近在用 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 也没用了，去掉。
