我在我的VueJS应用程序中使用带有Axios的blob响应类型从服务器下载文档。当响应代码为200时，它可以正常工作并下载文件，但是当有任何超文本传输协议错误时，当我捕获错误时，我无法读取状态代码，因为错误是JSON响应。
是否有人遇到过类似的问题，并想出了将blob响应类型转换为json并根据状态码抛出错误的方法？
我尝试从Laravel后端以纯文本形式发送响应，并尝试在前端将响应转换为JSON或文本，但运气不好。
我尝试阅读错误响应头，但没有运气。
Axios({
url: 'xxxx',
method: 'GET',
responseType: 'blob',
})
.then((response) => {
//code to read the response and create object url with the blob and download the document
})
.catch((error) => {
console.log('Error', error.message); //nothing
console.log('Error', error.error); //undefined
console.log('Error', error.data); //undefined
const blb = new Blob([error], {type: "text/plain"});
const reader = new FileReader();
// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e) => {
const text = e.srcElement.result;
console.log(text);
});
// Start reading the blob as text.
reader.readAsText(blb);
});我只想根据状态码抛出错误消息。如果是401，只是希望它是未经授权的，其他任何东西都将其抛到组件上。
原因是响应类型是blob。
如果出错，状态码直接在您的异常对象中可用。但是，响应是一个promise。
你需要做的是：
.catch((error) => {
let statusCode = error.response.status
let responseObj = await error.response.data.text();
:
:
有关详细信息，您可以阅读留档。
您可以这样做，如果它是blob，它会将错误转换为JSON，或者让响应数据接收到，您可以使用它。
let errorString = error.response.data;
if (
error.request.responseType === 'blob' &&
error.response.data instanceof Blob &&
error.response.data.type &&
error.response.data.type.toLowerCase().indexOf('json') != -1
) {
errorString = JSON.parse(await error.response.data.text());
}
alert(errorString);
您需要将响应blob转换为json：
Axios({
url: 'xxxx',
method: 'GET',
responseType: 'blob',
})
.then((response) => {
//code to read the response and create object url with the blob and download the document
})
.catch((error) => {
if (
error.request.responseType === 'blob' &&
error.response.data instanceof Blob &&
error.response.data.type &&
error.response.data.type.toLowerCase().indexOf('json') != -1
) {
new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = () => {
error.response.data = JSON.parse(reader.result);
resolve(Promise.reject(error));
};
reader.onerror = () => {
reject(error);
};
reader.readAsText(error.response.data);
})
.then(err => {
// here your response comes
console.log(err.response.data)
})
};
});
你可以使用这个内部拦截器。了解更多信息
