Axios — 在 Node.js 中下载进度

准备

本教程使用第三方包在终端上显示进度条。您可以在链接的 GitHub 存储库中找到有关visionmedia/progress包的更多详细信息。

您可以progress
从 NPM安装软件包：

npm i progress

使用 Axios 下载文件时显示进度条

从 Internet 下载文件时，您应该进行流式下载。通过将大文件分成小块并将文件作为单独的块下载，流非常适合处理大文件。

使用流可以很好地与进度条配合使用。通常，当向远程服务器发送下载请求时，它会以文件的总大小作为响应。这个总文件大小存储在content-length
响应头中。

某些服务器不会相应地设置content-length
标头。他们可能会使用不同的响应标头。如果您无法从 中选择文件大小content-length
，请浏览标题并尝试找到文件大小。

显示 Axios 下载的进度条

本教程将图像从Unsplash下载到本地磁盘。示例代码使用 Axios 向 Unsplash 发送请求并期待流响应。一旦响应可用，您应该content-length
从响应头中获取值。

使用总文件大小初始化进度条，然后将响应流通过管道传输到文件系统上的文件目标。

在将响应流式传输到磁盘时，您可以监听data
来自 Axios 的文件流上的事件。data
每次它提供下一个块时，将 unsplash 图像发送到您的机器的流都会发出该事件。然后您可以通知进度条更新状态。

这是一个 Axios 下载的工作实现，显示了它在终端上的进度：

'use strict'

const Fs = require('fs')  
const Path = require('path')  
const Axios = require('axios')  
const ProgressBar = require('progress')

async function downloadImage () {  
  const url = 'https://unsplash.com/photos/AaEQmoufHLk/download?force=true'

  console.log('Connecting …')
  const { data, headers } = await Axios({
    url,
    method: 'GET',
    responseType: 'stream'
  })
  const totalLength = headers['content-length']

  console.log('Starting download')
  const progressBar = new ProgressBar('-> downloading [:bar] :percent :etas', {
      width: 40,
      complete: '=',
      incomplete: ' ',
      renderThrottle: 1,
      total: parseInt(totalLength)
    })

  const writer = Fs.createWriteStream(
    Path.resolve(__dirname, 'images', 'code.jpg')
  )

  data.on('data', (chunk) => progressBar.tick(chunk.length))
  data.pipe(writer)
}

downloadImage()  

而已！确定响应大小，使用响应流并侦听data
响应流上的事件以相应地更新进度条。