使用axios下载带header的方法
一、整体流程
使用axios下载带header的过程可以分为以下几个步骤：
| 步骤 | 描述 |
|---|---|
| 步骤1 | 创建axios实例，并设置默认的请求header |
| 步骤2 | 构造下载请求的URL，并指定请求的method为GET |
| 步骤3 | 设置下载请求的header，如Authorization等 |
| 步骤4 | 发送下载请求，并处理下载文件的响应 |
| 步骤5 | 将下载的文件保存到本地磁盘或进行其他处理 |
下面将详细介绍每一步所需的代码及其注释。
二、代码实现
步骤1：创建axios实例并设置默认请求header
import axios from 'axios';
// 创建axios实例
const instance = axios.create({
baseURL: ' // 请求的基础URL
timeout: 10000, // 请求超时时间
headers: {
common: {
'Content-Type': 'application/json', // 默认请求header
},
},
});
步骤1中，我们首先需要导入axios库，并创建一个axios实例。可以根据实际情况设置baseURL和timeout等配置，这里以设置默认的Content-Type为例。
步骤2：构造下载请求的URL及method
const downloadUrl = ' // 下载请求的URL
// 构造下载请求
const options = {
url: downloadUrl,
method: 'GET',
};
步骤2中，我们需要构造下载请求的URL，并指定请求的method为GET。可以根据实际情况设置下载文件的URL。
步骤3：设置下载请求的header
// 设置下载请求的header
options.headers = {
...instance.defaults.headers, // 复制默认请求header
Authorization: 'Bearer token', // 设置额外的header，如Authorization等
};
步骤3中，我们需要设置下载请求的header。我们可以复制默认请求header，并添加额外的header字段，如Authorization等。根据实际情况替换Authorization字段的值。
步骤4：发送下载请求并处理响应
// 发送下载请求
instance(options)
.then(response => {
const contentDisposition = response.headers['content-disposition']; // 获取响应header中的content-disposition字段
const fileName = contentDisposition.split('filename=')[1]; // 获取文件名
const blob = new Blob([response.data]); // 创建一个Blob对象，用于保存下载文件
const link = document.createElement('a'); // 创建一个a标签
link.href = window.URL.createObjectURL(blob); // 设置a标签的链接为Blob对象的URL
link.download = fileName; // 设置a标签的下载文件名
link.click(); // 模拟点击a标签进行下载
})
.catch(error => {
console.error('下载失败', error);
});
步骤4中，我们使用之前创建的axios实例发送下载请求，并处理响应。在响应中，我们可以通过response.headers获取响应header中的content-disposition字段，从中解析出文件名。然后，我们创建一个Blob对象，将响应的数据保存到Blob对象中。接着，我们创建一个a标签，将Blob对象的URL作为a标签的链接，并设置下载文件名。最后，我们模拟点击a标签进行下载。
步骤5：保存下载文件到本地磁盘或进行其他处理
步骤5中，我们已经将下载的文件保存到了Blob对象中。我们可以选择将Blob对象保存到本地磁盘，或进行其他处理。
// 将Blob对象保存为文件
function saveBlob(blob, fileName) {
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
}
// 调用saveBlob函数保存文件
saveBlob(blob, fileName);
步骤5中，我们定义了一个saveBlob函数，用于将Blob对象保存为文件。我们可以调用该函数将Blob对象保存到本地磁盘。
三、类图
下面是本文介绍的代码的类图表示，使用mermaid语法标识：
classDiagram
