通过 AJAX 检索 Blob 时处理错误消息

Handling error messages when retrieving a blob via AJAX

本文关键字：处理 错误 消息 Blob AJAX 检索 通过      更新时间：2023-09-26
如何

执行可能返回 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。

当 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);
}
相关文章：