axios 下载进度

Axios是一个流行的基于Promise的HTTP库，它允许你在浏览器和Node.js应用中发送HTTP请求。如果你需要下载文件并跟踪其进度，可以利用axios提供的拦截器功能以及计算已接收的数据大小来实现下载进度。 首先，在安装axios之前，确保已经安装了axios和form-data库，因为下载通常涉及multipart/form-data格式： ```bash npm install axios form-data ``` 然后，你可以创建一个axios实例，并添加一个全局拦截器来处理上传或下载请求。下面是一个简单的例子，展示了如何监听下载进度： ```javascript import axios from 'axios'; import FormData from 'form-data'; const instance = axios.create(); instance.interceptors.response.use( (response) => { // 如果响应包含content-length头，我们可以跟踪进度 if (response.headers['content-length']) { const total = parseInt(response.headers['content-length'], 10); let received = 0; return response.clone().then((response) => { response.data.onDownloadProgress = (progressEvent) => { received += progressEvent.loaded; const percentComplete = Math.round((received / total) * 100); console.log(`Download Progress: ${percentComplete}%`); }; return response; }); } return response; }, (error) => { // 对错误做处理... return Promise.reject(error); } ); // 使用axios下载文件 const downloadFile = async () => { const formData = new FormData(); formData.append('file', 'path/to/your/file'); try { const response = await instance.post('/api/download', formData); // 处理下载完成后的数据 } catch (error) { console.error('Error downloading file:', error); } }; downloadFile(); ``` 这个示例中，我们创建了一个`onDownloadProgress`事件处理器，每当接收到新的字节数，就会更新进度百分比。然而，这并不是所有服务器都支持的内容长度指示，有些API可能不会提供此信息。在这种情况下，你可能需要依赖服务端返回更明确的进度信息或第三方库来辅助获取进度。