精通Axios和XMLHttpRequest文件下载GET和POST请求

如何在 Web 开发中优雅地实现文件下载

导言

在 Web 开发过程中，我们经常需要从服务器下载文件，例如图片、视频、文档等。为了实现优雅的文件下载，本文将深入探讨两种常用的方法：Axios 和 XMLHttpRequest，并提供详细的步骤和代码示例。

一、URL 请求下载

1. 静态资源下载

对于不需要验证的静态资源，例如图片或视频，可以使用以下方法直接下载：

• window.location.href = URL
• window.open(URL)
• 创建一个带有 a.href = URL 的 <a> 标签并模拟点击进行下载

2. 携带 Token 的 GET 请求下载

如果需要下载需要身份验证的资源，例如受 Token 保护的文档，可以使用以下方法：

axios.get(URL, {
  headers: {
    Authorization: 'Bearer ' + token
  }
});

3. 携带参数的 POST 请求下载

如果需要下载需要参数的资源，例如带日期参数的报告，可以使用以下方法：

axios.post(URL, {
  params: {
    date: '2023-03-08'
  }
});

二、Axios 请求下载（二进制下载）

1. 设置请求头

首先，在请求头中设置 responseType 为 blob，以指示服务器返回二进制数据：

axios.get(URL, {
  headers: {
    'Content-Type': 'application/octet-stream'
  },
  responseType: 'blob'
});

2. 处理二进制流

收到服务器返回的二进制数据后，可以使用 URL.createObjectURL() 和 Blob 对象进行处理：

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

三、XMLHttpRequest 请求下载

1. 创建 XMLHttpRequest 对象

首先，创建一个 XMLHttpRequest 对象：

const xhr = new XMLHttpRequest();

2. 设置请求头

与 Axios 类似，在请求头中设置 responseType 为 blob，以指示服务器返回二进制数据：

xhr.open('GET', URL, true);
xhr.responseType = 'blob';

3. 处理二进制流

收到服务器返回的二进制数据后，可以使用 URL.createObjectURL() 和 Blob 对象进行处理：

const url = URL.createObjectURL(xhr.response);
const a = document.createElement('a');
a.href = url;
a.download = 'filename.ext';
a.click();

四、常见问题解答

1. 如何在 React 中下载文件？

在 React 中可以使用 use-react-router 库或直接使用 fetch() API 实现文件下载。

2. 如何下载大文件？

对于大文件下载，可以使用流式传输或分块下载技术。

3. 如何处理下载进度？

可以使用 XMLHttpRequest 的 onprogress 事件监听器或 Axios 的 onDownloadProgress 钩子来处理下载进度。

4. 如何取消下载？

可以使用 XMLHttpRequest 的 abort() 方法或 Axios 的 cancelToken 机制来取消下载。

5. 如何实现跨域文件下载？

跨域文件下载需要使用 CORS 协议或代理服务器来实现。

结论

通过本文的介绍，您已经掌握了使用 Axios 和 XMLHttpRequest 在 Web 开发中优雅地实现文件下载的方法。无论您需要下载静态资源还是需要验证或参数的资源，这些技术都能满足您的需求。