如何使用 axios 请求将 422 错误拆分为 field/error？

Question

在我的 vuejs3 应用程序中使用 axios 保存数据时，出现 422 验证错误我尝试捕获它并显示消息哪些字段无效。我尝试读取错误响应对象，但失败了。我喜欢 :

axios.put(requestUrl, currencyData, credentials).then(({data}) => {
    isPageUpdating.value = false
    showPopupMessage('Currency Editor', 'Currency updated successfully !', 'success')
    router.push({path: '/admin/currencies'})
}).catch((error) => {
    if (error.response.status === 422 ) {
        console.log('error.response.data:::')
        console.log(error.response.data)
        console.log('error.response.data.errors:::')
        console.log(error.response.data.errors)
        console.log(typeof error.response.data.errors)
        if (typeof error.response.data.errors === 'object') {
            let errorsArray = Object.values(error.response.data.errors)
            let errStr = ''
            errorsArray.map((errorField, errorKey) => {
                console.log('errorField::')
                console.log(errorField)
                console.log(typeof errorField)
                console.log('errorKey::')
                console.log(errorKey)
                console.log('errorsArray[errorKey]::')
                console.log(errorsArray['errorKey'])
                
            })

            showPopupMessage('Currency Editor', errStr, 'warn')
        }
        return
    }
})

我试图在上面的 errStr 中获取错误文本，但失败了我在浏览器的控制台中看到：https://prnt.sc/xyy7ql

"axios": "^0.20.0-0",
"vue": "^3.0.0",
"yup": "^0.29.3"

如何获得无效的 fields/errors 列表作为文本？

谢谢！

Answer 1

看起来您正在尝试从 data.errors 对象

中获取一组值

let errorsArray = Object.values(error.response.data.errors)

和data.errors看起来像：

{
  "name": ["error 1", "error 2"]
}

如果您随后尝试遍历 data.errors 的键，它将无法与

一起使用

errorsArray.map((errorField, errorKey) => {}

因为Object.valuesreturns一个数组，其中key/index是一个数字[0..]

这就是为什么你的 errorKey 是 0;

如果您想要 name 字段中的错误，您可以这样做

let errorsArray = Object.values(error.response.data.errors.name)

但如果键是字段名称...

let errorsKeysArr = Object.keys(error.response.data.errors)
errorsKeysArr.map((key) => {
  const errorField = error.response.data.errors[key]
  ...
})

如何使用 axios 请求将 422 错误拆分为 field/error？

How to split 422 error into field/error with axios request?

javascript

vuejs3