Axios Blob响应中的HTTP错误处理：提取状态码

处理Axios Blob响应中的HTTP错误

在使用Axios进行文件下载时，设置 responseType 为 "blob" 有助于获取二进制文件，但处理HTTP错误可能会令人沮丧。这是因为blob响应是一种原始格式，不包含JSON响应的错误状态码信息。

如何提取HTTP错误状态码

1. 将Blob转换为文本

使用FileReader API将blob转换为文本，然后从中提取错误信息：

const blb = new Blob([error], {type: "text/plain"});
const reader = new FileReader();

reader.addEventListener('loadend', (e) => {
  const text = e.srcElement.result;
  console.log(text);
});

reader.readAsText(blb);

2. 将Blob转换为JSON

如果服务器返回JSON格式的错误，可以使用 text() 方法将blob转换为JSON：

blb.text().then((text) => {
  const errorJson = JSON.parse(text);
  console.log(errorJson.status); // 访问状态码
});

在Axios中处理错误

通过 catch() 方法，可以在Axios中处理错误并提取状态码：

axios({
  url: 'xxxx',
  method: 'GET',
  responseType: 'blob',
})
.then((response) => {
  // 处理成功的响应
})
.catch((error) => {
  // 处理错误响应
  if (error.response) {
    const statusCode = error.response.status;

    // 根据状态码进行相应处理
    switch (statusCode) {
      case 401:
        // 未授权
        break;
      case 403:
        // 禁止访问
        break;
      default:
        // 其他错误
        break;
    }
  }
});

结论

通过这些方法，我们可以将Axios的blob响应转换为可读格式，从而提取HTTP错误的状态码。这使我们能够在处理文件下载时的错误响应时做出适当的响应。

常见问题解答

• 为什么响应是一个blob？
  当下载文件时，设置 responseType 为 "blob" 可以直接获取原始文件数据。

• 如何确保错误响应是JSON格式？
  与服务器确认错误响应的格式，并相应地调整客户端代码。

• 有哪些其他方法可以处理blob错误？
  可以考虑使用像FormData这样的替代API来处理文件上传和下载。

• 如何处理blob响应中的非HTTP错误？
  非HTTP错误通常表示网络连接或文件损坏等问题。可以考虑使用 try...catch 块或自定义错误处理机制。

• 我该如何选择最适合我的方法？
  选择方法取决于具体需求和项目上下文的复杂性。在实现之前考虑每个方法的优点和缺点至关重要。