一、問題
最近在用 koa2 寫注冊(cè)接口再榄，在調(diào)試接口的時(shí)候出現(xiàn)了這樣一個(gè)問題：
<br />
后端自定義了 400 NotFound 錯(cuò)誤狡刘，并且在 Http Response Body 中返回了如下結(jié)構(gòu)：
"success": false
"msg": "NotFound",
"errorCode": 10000,
"request": "POST /v1/user/register",
想要測(cè)試 validator 層的功能，于是我在前端（Vue + Element-ui）寫了如下代碼：
/*
* 注冊(cè)
* @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])
}
})
}
并故意在表單中填錯(cuò)了 pasword1 和 password2
在 postman 中可以正確得到預(yù)期結(jié)果：
{
“success”: false,
"msg": [
"password1密碼長(zhǎng)度在6～32之間",
"password2密碼長(zhǎng)度在6～32之間",
"兩個(gè)密碼必須相同"
],
"errorCode": 10000,
"request": "POST /v1/user/register"
}
但是我們從前端會(huì)報(bào)錯(cuò)：
1572876136373.jpg
問題是困鸥，響應(yīng)體的數(shù)據(jù)哪去了嗅蔬？
二、解決
這個(gè)問題我想了半天疾就，后來發(fā)現(xiàn)自己魔怔了澜术。用 await 求值相當(dāng)于拿到 Promise 的 res，當(dāng)然拿不到錯(cuò)誤的響應(yīng)體猬腰。修改前端代碼鸟废，解決：
/*
* 注冊(cè)
* @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
}
})
}
這時(shí)候，由于用不到判斷姑荷，后端的返回體里面的 success 也沒用了盒延，去掉。
