axios调用get请求下载文件

原创

mob649e816aeef7 2024-08-26 06:08:56 ©著作权

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

使用 Axios 实现文件下载的完整指南

在现代Web开发中，利用Axios库发起HTTP请求是常见的任务之一。尤其是在需要下载文件的情境下，掌握如何使用Axios发送GET请求并处理下载的文件就显得尤其重要。本文将带你深入理解如何使用Axios下载文件，并提供完整的代码示例。

整体流程概述

以下是使用Axios进行文件下载的基本流程：

步骤	说明
1	安装Axios库
2	创建GET请求，指定响应类型为Blob
3	在请求成功后处理Blob数据
4	创建下载链接并自动触发文件下载

流程图

以下是描述上述流程的流程图：

flowchart TD
    A[安装Axios库] --> B[创建GET请求]
    B --> C[处理Blob数据]
    C --> D[创建下载链接]
    D --> E[触发文件下载]

每一步详细说明

1. 安装Axios库

首先，你需要在项目中安装Axios库。如果你已经使用npm或yarn，你可以通过以下命令进行安装：

npm install axios

或

yarn add axios

这行代码的作用是将Axios库安装到你的项目中，以便后面的代码可以使用它。

2. 创建GET请求

接下来，我们需要创建一个GET请求。在这个请求中，我们要配置一些必要的参数，例如我们期望获得Blob数据作为响应。

import axios from 'axios';

const downloadFile = async (fileUrl) => {
    try {
        const response = await axios.get(fileUrl, {
            responseType: 'blob' // 指定响应类型为Blob
        });
        return response.data; // 返回Blob数据
    } catch (error) {
        console.error('下载失败:', error);
    }
};

以上代码中的axios.get方法负责发起GET请求，其中fileUrl是文件的URL。responseType: 'blob'是关键，它确保我们以Blob的形式接收到响应。这对于下载二进制文件很重要，比如PDF或图像等。

3. 处理Blob数据

获取到Blob数据后，我们需要将其转换成一个可下载的文件。这里我们创建一个URL对象并生成一个下载链接。

const createDownloadLink = (blob, filename) => {
    const url = window.URL.createObjectURL(new Blob([blob])); // 创建Blob URL
    const link = document.createElement('a'); // 创建一个链接元素
    link.href = url; // 设置链接的href属性
    link.setAttribute('download', filename); // 指定下载的文件名
    document.body.appendChild(link); // 将链接添加到DOM中
    link.click(); // 触发链接的点击事件
    link.remove(); // 移除链接
    window.URL.revokeObjectURL(url); // 释放Blob URL
};

上述代码中的createDownloadLink函数接受Blob和文件名作为参数。我们利用URL.createObjectURL创建一个临时URL，并利用<a>标签实现下载。

4. 创建下载链接并触发下载

最后，我们将上述步骤结合在一起，完成文件下载的最终实现。

const downloadAndSaveFile = async (fileUrl, filename) => {
    const blob = await downloadFile(fileUrl); // 下载文件，得到Blob
    if (blob) {
        createDownloadLink(blob, filename); // 创建下载链接并触发下载
    }
};

// 使用示例
downloadAndSaveFile(' 'downloaded-file.pdf');

在这里，downloadAndSaveFile函数是将上述所有功能连接在一起的主函数。你可以通过传入文件URL和想要的文件名来完成下载。