轻松下载：Vue中的Axios流式文件下载和后端报错处理

2023-06-04 22:13:34

使用 Axios 在 Vue 中实现文件下载：全面指南

发起下载请求

使用 Axios 发起文件下载请求的流程如下：

创建 Axios 实例：

const axiosInstance = axios.create({
  // 设置超时时间
  timeout: 10000,
  // 指定下载文件时使用的responseType，以流式方式接收响应数据
  responseType: 'blob',
});

发起下载请求：

const response = await axiosInstance.get('/download', {
  // 设置请求头，以告诉后端客户端期望的文件类型
  headers: {
    'Accept': 'application/octet-stream',
  },
});

处理下载响应

下载文件后，我们需要进行处理：

检查响应状态码：

if (response.status === 200) {
  // ...
}

获取下载的文件名：

const fileName = response.headers['Content-Disposition'].split('filename=')[1];

创建 Blob 对象：

const blob = new Blob([response.data]);

创建 a 标签触发下载：

const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = fileName;
a.click();

释放 Blob 对象占用的内存：

URL.revokeObjectURL(a.href);

处理后端报错信息

在文件下载过程中，后端可能会返回错误信息。我们可以通过以下步骤处理：

获取后端错误信息：

const errorMessage = response.data.message;

显示错误信息给用户：

alert(errorMessage);

提高用户体验：

const errorMessage = {
  404: '找不到指定文件',
  500: '服务器内部错误，请稍后重试',
  503: '服务不可用，请稍后重试',
};
const status = response.status;
alert(errorMessage[status] || '未知错误，请稍后重试');

总结

在 Vue 中使用 Axios 进行文件下载是一个相对简单的过程。通过遵循本文中的步骤，您可以轻松地实现文件下载功能，并处理可能出现的后端错误信息。

常见问题解答

1. 如何设置下载文件的超时时间？

const axiosInstance = axios.create({
  timeout: 10000, // 设置超时时间为 10 秒
  // ...
});

2. 如何动态设置下载文件的文件名？
您可以根据需要在后端的响应头中设置文件名。例如：

// 后端代码
response.setHeader('Content-Disposition', 'attachment; filename="dynamic-file-name.txt"');

3. 如何在文件下载时显示进度条？
您可以使用 onDownloadProgress 监听器跟踪文件下载进度。例如：

const axiosInstance = axios.create({
  onDownloadProgress: (progressEvent) => {
    // 计算文件下载进度
    const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    // 更新进度条
    // ...
  },
  // ...
});