通过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.

responseType可以在readyState到达3 之前的任何时间更改该值.当readyState达到2时,您可以访问响应标头以做出该决定.

更新的示例代码:

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