避免处理错误，如果错误在Vue与Axios的每个请求中都有响应

Question

我使用axios拦截器来处理一些错误，特别是没有响应的错误。在项目的某些部分，我使用error.response.data中包含的消息进行验证，并显示存储在后端的消息。但这个拦截器不阻止我不得不检查错误响应。

我的拦截器:

axios.interceptors.response.use(
function (response) {
...
},
function (error) {
if (!error.response) {
...
return Promise.reject(new Error(error.message))
}

依赖于error.response:

的请求示例

this.$store.dispatch('updateField', { [this.fieldKey]: this.value ? this.value : null }).catch((error) => {
this.validateField(error.response.data)
})

但是我必须把validateField调用在if(eror.response)中以避免在控制台中出现错误，并将其扩展到我的代码中?

Answer 1

response可以被视为可选的，因为它实际上是:

this.validateField(error.response?.data)

或标准化的错误包含所需的结构属性和不依赖于Axios错误可以创建一个拦截器:

function (rawError) {
const error = new Error(error.response?.data?.myError || error.message);
error.data = error.response?.data || null;
error.headers = error.response?.headers || null;
error.status = error.response?.status || 0;
return Promise.reject(error);
}