请求响应什么情况要使用 responseType: ‘blob‘

在前端开发中，使用 responseType: ‘blob’ 的主要情况是当你向服务器发起请求，并且期望响应返回的是一个二进制数据（Blob 对象）时。

典型应用场景包括：
1.文件下载： 当你需要从服务器下载文件时，比如下载图片、PDF、Excel 文件等，服务器返回的响应通常是二进制数据。此时就需要将 responseType 设置为 ‘blob’，以便直接处理这些二进制数据或者将其作为文件下载到本地。

const url = 'https://example.com/download-file';
fetch(url, {
    method: 'GET',
    responseType: 'blob' // 请求的响应类型为二进制数据
})
.then(response => {
    // 处理文件下载
    const blob = response.blob();
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.pdf'; // 设置下载文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
})
.catch(error => console.error('文件下载失败', error));

2.音视频播放： 当你需要从服务器获取音频或视频文件时，也需要将 responseType 设置为 ‘blob’，然后可以将 Blob 对象传递给 或 元素的 src 属性，从而实现播放。

const url = 'https://example.com/video.mp4';
fetch(url, {
    method: 'GET',
    responseType: 'blob' // 请求的响应类型为二进制数据
})
.then(response => {
    // 处理音视频播放
    const blob = response.blob();
    const video = document.getElementById('myVideo');
    video.src = URL.createObjectURL(blob);
})
.catch(error => console.error('音视频播放失败', error));

3.上传文件预览： 在上传文件之前，有时需要先预览文件内容（例如图片），此时需要将 responseType 设置为 ‘blob’，然后使用 FileReader 对象读取 Blob 数据进行预览。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(event) {
        const imageUrl = event.target.result;
        const img = document.createElement('img');
        img.src = imageUrl;
        document.body.appendChild(img);
    };
    reader.readAsDataURL(file);
});

总结来说，当需要处理从服务器获取的二进制数据（如文件、音视频等）时，使用 responseType: ‘blob’ 可以直接获取到原始的二进制数据，方便后续的处理和使用。