Обработка сообщений об ошибках при получении blob через AJAX

как я могу выполнить вызов AJAX, который может возвращать blob или текстовую строку в зависимости от ответа сервера?

Я использую AJAX для преобразования пользовательского видео в аудио blob (для использования в <audio> tag). Процесс преобразования работает нормально, но всегда возможно, что с видео что-то не так, и в этом случае сервер вернет код состояния 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 не обрабатывает капли.

9
ajax javascript

1 ответов

Установите тип ответа, когда readyState равен 2.

на 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);
}
11