Axios POST响应未定义，但网络显示一个响应对象

Question

我想在我的应用程序中包含一些错误信息，但我在解析响应时遇到了麻烦。我正在使用axios向远程服务器发送POST请求，以传输这样的文件。

//http is an axios instance
const response = await http.post(url, formData, {
headers: {
'content-type': 'multipart/form-data',
},
});
if (response) {
return { errors: false };
} else {
return {      
errors: true,
errorMessages: ['There was an error uploading the file'],
//i want to extract errors array from response actually
};
}

我可以上传我的文件很好，后端似乎是验证一切如预期的。因此，当我试图强制错误发送无效文件时，我看到响应从devtools的network选项卡的后端返回，看起来像这样:

{"hasErrors":true,"data":false,"errors":["file extension validation: File must use .xlsx extension."]}

但是在我的前面，我不能访问我的response变量中的这两个字段。服务器响应代码为400。

我感谢任何帮助，因为我有点失去了试图记录这个，不想显示只是一个通用的错误信息，当服务器实际上提供了这个信息。

这个问题是由我一直使用的axios实例的interceptor引起的。拦截器处理错误响应，检查响应的状态是做一件事还是做另一件事，但是当status为400时，它什么也不做。我只是将以下代码添加到它们的处理程序中，以便捕获异常:

if (error.response.status == 400) {
return Promise.reject(error);
};

我不想打乱他们创建axios实例的方式，所以我添加了最后一段代码。忽略拦截器的另一个可能的解决方案是使用axios.create()来创建一个没有拦截器的新实例。但那样我就得再做一次授权检查。所以我决定用这种方式修复它。现在我能够像预期的那样捕获错误，并记录它或对其信息做任何事情!

Answer 1

这里的问题是axios不解决post调用400状态响应;它抛出一个可以捕获的错误。

try {
const response = await http.post(/* your config */);
return {errors: false};
} catch (e) {
const {response} = e;
return {errors: true};
}

Answer 2

我找到了答案。为了更容易阅读，我将把它作为更新贴在原始评论中。

这个问题是由我使用的axios实例的拦截器引起的，这是我添加到它的代码，这样我就可以得到我想要的数据。查看原文了解更多信息。

if (error.response.status == 400) {
return Promise.reject(error);
};

Answer 3

在我的例子中，

我写了处理错误的代码我忘了在没有错误的情况下返回数据