Obsługa komunikatów o błędach podczas pobierania obiektu blob za pośrednictwem AJAX

Question

Jak wykonać wywołanie AJAX, które może zwrócić obiekt typu blob lub ciąg tekstowy w zależności od odpowiedzi serwera?

Używam AJAX do konwersji wideo dostarczonego przez użytkownika do blobu audio (do użycia w tagu <audio>). Proces konwersji działa dobrze, ale zawsze jest możliwe, że coś może być nie tak z wideo, w którym to przypadku serwer zwróci kod stanu HTTP 500 z komunikatem o błędzie w treści odpowiedzi jako tekst jawny. W takim przypadku muszę czysty tekst odpowiedzi, ale stara się wykorzystać wyniki responseText w tym komunikatem o błędzie:

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

Oto uproszczona wersja mojego aktualnego kodu:

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

używam jQuery gdzie indziej w moim kodzie (więc odpowiedzi jQuery są dopuszczalne), ale o ile wiem jQuery nie obsługuje obiektów blob.

Answer 1

Ustaw responseType gdy readyState to 2.

Wartość responseType mogą ulec zmianie w dowolnym czasie przed readyState osiągnie 3. Gdy readyState osiągnie 2, masz dostęp do nagłówków odpowiedzi, aby to decyzja z.

Updated przykładowy kod:

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