javascript 通过 AJAX 检索 blob 时处理错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29023509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling error messages when retrieving a blob via AJAX
提问by Brilliand
How can I perform an AJAX call that may return a blob or a text string depending on the server's response?
如何根据服务器的响应执行可能返回 blob 或文本字符串的 AJAX 调用？
I'm using AJAX to convert a user-supplied video to an audio blob (for use in an <audio>tag). The conversion process works fine, but it's always possible that there could be something wrong with the video, in which case the server will return an HTTP status code of 500 with the error message in the response body as plaintext. In that case, I need the plaintext of the response, but trying to use responseText results in this error message:
我正在使用 AJAX 将用户提供的视频转换为音频 blob（用于<audio>标签）。转换过程工作正常，但视频总是可能有问题，在这种情况下，服务器将返回 HTTP 状态代码 500，响应正文中的错误消息为纯文本。在这种情况下，我需要响应的明文，但尝试使用 responseText 会导致此错误消息：
Uncaught InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').
Here's a simplified version of my current code:
这是我当前代码的简化版本：
function convertToAudio(file) {
var form = new FormData();
form.append("Video", file, file.name);
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
console.log(typeof request.response); // should be a blob
} else if(request.readyState == 4 && request.responseText != "") {
console.log(request.responseText);
}
};
request.open("POST", "video_to_audio", true);
request.responseType = "blob";
request.send(form);
}
I am using jQuery elsewhere in my code (so jQuery answers are acceptable), but as far as I know jQuery doesn't handle blobs.
我在我的代码中的其他地方使用了 jQuery（所以 jQuery 答案是可以接受的），但据我所知 jQuery 不处理 blob。
回答by Brilliand
Set the responseType when the readyState is 2.
当 readyState 为 2 时设置 responseType。
The responseTypevalue can be changed at any time before the readyStatereaches 3. When the readyStatereaches 2, you have access to the response headers to make that decision with.
该responseType值可以在readyState达到 3之前随时更改。当readyState达到 2 时，您可以访问响应头来做出决定。
Updated sample code:
更新的示例代码：
function convertToAudio(file) {
var form = new FormData();
form.append("Video", file, file.name);
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
console.log(typeof request.response); // should be a blob
} else if(request.responseText != "") {
console.log(request.responseText);
}
} else if(request.readyState == 2) {
if(request.status == 200) {
request.responseType = "blob";
} else {
request.responseType = "text";
}
}
};
request.open("POST", "video_to_audio", true);
request.send(form);
}
