javascript - 通过 AJAX 检索 blob 时处理错误消息

Question

我如何执行可能根据服务器响应返回 blob 或文本字符串的 AJAX 调用？

我正在使用 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').

这是我当前代码的简化版本:

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);
}

我在我的代码中的其他地方使用了 jQuery(所以 jQuery 的答案是可以接受的)，但据我所知，jQuery 不处理 blob。

Answer 1

设置readyState为2时的responseType。

在 readyState 达到 3 之前，可以随时更改 responseType 值。当 readyState 达到 2 时，您可以访问用于做出该决定的响应 header 。

更新的示例代码:

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);
}