通过Ajax检索blob时处理错误消息

如何根据服务器的响应执行可能返回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);
  }

解决办法

当readyState之前的任何时间更改responseType，值达到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);
  }