Umgang mit Fehlermeldungen beim Abrufen eines Blobs über AJAX

Question

Wie kann ich einen AJAX-Aufruf ausführen, der abhängig von der Antwort des Servers einen Blob oder eine Textzeichenfolge zurückgibt?

Ich benutze AJAX, um ein von Benutzern bereitgestelltes Video in ein Audio-Blob zu konvertieren (zur Verwendung in einem <audio>-Tag). Der Konvertierungsprozess funktioniert einwandfrei, aber es ist immer möglich, dass etwas mit dem Video nicht stimmt. In diesem Fall gibt der Server einen HTTP-Statuscode von 500 mit der Fehlermeldung im Antworttext als Klartext zurück. In diesem Fall muss ich den Klartext der Antwort, aber ich versuche response Ergebnisse in dieser Fehlermeldung zu verwenden:

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'). 

Hier ist eine vereinfachte Version meiner aktuellen 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); 
} 

ich jQuery bin mit anderswo in meinem Code (so jQuery Antworten sind akzeptabel), aber soweit ich weiß jQuery nicht mit Blobs.

Answer 1

die response gesetzt, wenn der Readystate ist 2.

Der responseType Wert kann jederzeit vor dem readyState 3. erreicht geändert werden, wenn die readyState 2 erreicht, Sie Zugriff auf die Response-Header müssen, dass Entscheidung mit.

Aktualisiert Beispielcode:

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