文件流下载：Axios 请求中 responseType 为 blob 时的错误数据处理

2023-12-01 05:46:53

在Axios请求中处理响应类型为BLOB的错误响应

简介

文件下载是Web开发中的常见任务。当使用流行的HTTP客户端库Axios时，我们可以指定responseType选项来控制响应数据的格式。对于文件下载，我们通常将responseType设置为BLOB，它将返回原始文件流。

然而，当下载失败时，后端服务器可能会返回一个错误响应，其中包含错误代码、消息和可能的其他数据。如果我们使用responseType:'blob'来接收文件流，那么错误响应也会以BLOB格式返回，这使得我们无法直接访问错误信息。

本文将探讨如何处理这种情况，以便我们能够正确地从Axios请求中提取错误信息，并在页面上显示错误消息。

响应类型：BLOB

当我们将responseType设置为BLOB时，Axios会返回一个Blob对象，其中包含文件流。这对于处理二进制文件（如图像或视频）非常有用，因为我们可以直接将其保存到本地文件系统。然而，对于错误响应，我们需要从Blob中提取实际的错误消息。

错误处理

为了处理错误响应，我们可以使用以下步骤：

检查响应状态代码： 首先，我们需要检查响应的状态代码。对于错误响应，状态代码通常为400（错误请求）或500（服务器错误）。
提取Blob数据： 如果响应状态代码表示错误，则我们可以使用Blob.text()方法提取Blob中的文本数据。
解析错误消息： 一旦我们有了文本数据，就可以使用JSON.parse()将其解析为JavaScript对象。这将为我们提供错误代码、消息和任何其他数据。
显示错误消息： 最后，我们可以使用错误消息对象中的信息来在页面上显示用户友好的错误消息。

示例代码

以下示例代码演示了如何在Axios请求中处理responseType:'blob'的错误响应：

async function downloadFile() {
  try {
    const response = await axios.get('/download', {
      responseType: 'blob',
    });

    // 成功下载文件
    const fileURL = URL.createObjectURL(response.data);
    window.location.href = fileURL;
  } catch (error) {
    // 处理错误响应
    if (error.response && error.response.data) {
      const errorMessage = await error.response.data.text();
      const errorObject = JSON.parse(errorMessage);

      // 显示错误消息
      alert(`错误代码：${errorObject.code}\n错误消息：${errorObject.msg}`);
    } else {
      // 处理其他错误
    }
  }
}