javascript axios 实现进度监控的示例代码_Javascript

在使用 axios 发送 http 请求时，进度监控非常重要，尤其是在上传或下载较大文件时。幸运的是，axios 支持通过 onuploadprogress 和 ondownloadprogress 来监控上传和下载的进度。

1. 监控下载进度

axios 提供了一个 ondownloadprogress 回调函数，可以用来监听下载的进度。该回调会返回一个 progress 对象，包含 loaded（已经下载的字节数）和 total（文件的总字节数）等信息。

const axios = require('axios');

axios.get('https://example.com/large-file.zip', {
  ondownloadprogress: (progressevent) => {
    const percent = math.round((progressevent.loaded * 100) / progressevent.total);
    console.log(`download progress: ${percent}%`);
  }
})
.then(response => {
  console.log('download completed!');
})
.catch(error => {
  console.error('error downloading file:', error);
});

2. 监控上传进度

对于文件上传，也可以使用 onuploadprogress 来监控上传进度。该回调函数类似，也返回一个 progress 对象，包含上传的字节数和文件的总字节数。

const formdata = new formdata();
formdata.append('file', fileinput.files[0]); // 假设文件通过 html 的文件输入获取

axios.post('/upload', formdata, {
  headers: { 'content-type': 'multipart/form-data' },
  onuploadprogress: (progressevent) => {
    const percent = math.round((progressevent.loaded * 100) / progressevent.total);
    console.log(`upload progress: ${percent}%`);
  }
})
.then(response => {
  console.log('upload completed!');
})
.catch(error => {
  console.error('error uploading file:', error);
});

3. 结合上传和下载进度

如果你需要同时监控上传和下载进度，可以在同一个 axios 请求中同时使用 onuploadprogress 和 ondownloadprogress：

const formdata = new formdata();
formdata.append('file', fileinput.files[0]);

axios.post('/upload', formdata, {
  headers: { 'content-type': 'multipart/form-data' },
  onuploadprogress: (progressevent) => {
    const percentuploaded = math.round((progressevent.loaded * 100) / progressevent.total);
    console.log(`upload progress: ${percentuploaded}%`);
  },
  ondownloadprogress: (progressevent) => {
    const percentdownloaded = math.round((progressevent.loaded * 100) / progressevent.total);
    console.log(`download progress: ${percentdownloaded}%`);
  }
})
.then(response => {
  console.log('upload and download completed!');
})
.catch(error => {
  console.error('error occurred:', error);
});

4. 显示进度条

结合进度值，你可以使用浏览器的进度条（例如 <progress> 元素）来显示进度。

<progress id="upload-progress" value="0" max="100"></progress>
<progress id="download-progress" value="0" max="100"></progress>

const uploadprogressbar = document.getelementbyid('upload-progress');
const downloadprogressbar = document.getelementbyid('download-progress');

const formdata = new formdata();
formdata.append('file', fileinput.files[0]);

axios.post('/upload', formdata, {
  headers: { 'content-type': 'multipart/form-data' },
  onuploadprogress: (progressevent) => {
    const percentuploaded = math.round((progressevent.loaded * 100) / progressevent.total);
    uploadprogressbar.value = percentuploaded;
  },
  ondownloadprogress: (progressevent) => {
    const percentdownloaded = math.round((progressevent.loaded * 100) / progressevent.total);
    downloadprogressbar.value = percentdownloaded;
  }
})
.then(response => {
  console.log('upload and download completed!');
})
.catch(error => {
  console.error('error occurred:', error);
});

5. 自定义进度显示

你还可以自定义进度条的显示方式，例如使用 console.log、alert 或自定义 dom 元素显示进度。

const formdata = new formdata();
formdata.append('file', fileinput.files[0]);

axios.post('/upload', formdata, {
  headers: { 'content-type': 'multipart/form-data' },
  onuploadprogress: (progressevent) => {
    const percent = math.round((progressevent.loaded * 100) / progressevent.total);
    document.getelementbyid('upload-status').innertext = `upload progress: ${percent}%`;
  },
  ondownloadprogress: (progressevent) => {
    const percent = math.round((progressevent.loaded * 100) / progressevent.total);
    document.getelementbyid('download-status').innertext = `download progress: ${percent}%`;
  }
})
.then(response => {
  console.log('upload and download completed!');
})
.catch(error => {
  console.error('error occurred:', error);
});