使用axios blob 404

原创

mob64ca12de62a6 2024-08-12 03:48:11 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12de62a6的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Axios 下载 Blob 文件并处理 404 错误

在现代的 web 开发中，常常需要通过 AJAX 请求从服务器获取数据，其中有时包括二进制文件（比如图片、PDF 文档等）。为了使这些数据在 JavaScript 中能够方便地使用，通常会使用 Blob 对象。本文将详细介绍如何使用 axios 来请求 Blob 类型的数据，并处理可能出现的 404 错误。

什么是 Blob？

Blob 是 Binary Large Object 的缩写，通常用于表示文件或类似文件的对象。在 JavaScript 中，Blob 对象表示一种不可变的原始数据。创建 Blob 对象后，可以通过 URL.createObjectURL() 方法为其生成一个 URL，方便在 HTML 中展示，如用在 <img> 标签中。

使用 Axios 获取 Blob

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。使用 axios 获取 Blob 文件的步骤如下：

发送 HTTP 请求。
处理响应，获取 Blob 对象。
创建 URL 并展示数据。

下面是一个通过 axios 请求 Blob 数据的示例代码：

import axios from 'axios';

async function fetchBlob(url) {
  try {
    const response = await axios.get(url, {
      responseType: 'blob' // 指定响应类型为 blob
    });
    
    // 创建 URL
    const blobUrl = window.URL.createObjectURL(response.data);
    
    // 在页面中使用 Blob 数据
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = 'file.pdf'; // 设置下载文件名
    document.body.appendChild(link);
    link.click();
    link.remove();

  } catch (error) {
    if (error.response) {
      // 服务器响应的状态码不在 2xx 范围内
      console.error('请求失败：', error.response.status);
      if (error.response.status === 404) {
        console.error('资源未找到，404错误');
      }
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('没有收到响应：', error.request);
    } else {
      // 发生了其他错误
      console.error('请求错误：', error.message);
    }
  }
}

// 使用示例
fetchBlob('

在这个例子中，我们首先定义了一个异步函数 fetchBlob，通过 axios.get 方法获取 Blob 数据。当请求成功后，我们创建了一个指向 Blob 的 URL，并利用 <a> 标签触发文件下载。如果请求失败，我们会根据错误类型进行处理，并在控制台中输出相应的错误信息。

处理 404 错误

在上述代码中，我们已经处理了 404 错误。当访问一个不存在的资源时，服务器会返回 404 状态码。在 catch 块中，我们通过 error.response.status 判断状态码，若为 404，则输出特定的错误信息。

状态图示例

下面是一个简单的状态图，展示当请求 Ajax 时的状态变化：

stateDiagram
    [*] --> 初始化
    初始化 --> 请求中
    请求中 --> 成功
    请求中 --> 失败
    成功 --> [*]
    失败 --> 处理错误
    处理错误 --> [*]

序列图示例

下面是请求 Blob 数据过程的序列图，展示了不同对象之间的交互过程：

sequenceDiagram
    participant A as 用户
    participant B as Axios
    participant C as 服务器

    A->>B: 发送请求
    B->>C: 请求 Blob 数据
    C-->>B: 返回数据或错误状态
    B-->>A: 返回处理后的 Blob 数据或错误信息