reactjs - 提高axios获取下载速度

Question

我正在使用axios从 Azure 存储 Blob 下载文件 (~100MB)。

axios({
  method: 'get',
  url: uri,
  onDownloadProgress: (progressEvent) => {
    console.log("Loaded: " + ((progressEvent.loaded / progressEvent.total) * 100) + "%"); 
  },
  responseType: 'arraybuffer'
}).then({})

我的问题是实际下载文件需要相当长的时间（约 10 分钟）。我以前使用的 fetch() 甚至比这慢（约 15-20 分钟）。对于如何加快下载速度，你们有什么建议吗？我的网速不是问题，因为直接下载文件或使用 Azure 存储资源管理器（1.12.0、AzCopy 10.3.3）只需不到 2 分钟。

我也尝试使用 azure-storage 的 blobServiceClient，但速度与 axios 和 fetch 相似（大约 15kbps）。

如果有帮助，这在 React 应用程序中。

标签： reactjsaxiosazure-blob-storage

Answer 1

我测试了下载速度。我希望我的结果对你有用。

1. 我StorageExplorer.exe作为源文件上传以进行下载测试。文件大小为 92.5M。

2. 通过下载文件Azure Storage Explore，它会占用1 minute and 07 seconds。

3. 通过 chrome 浏览器在门户中下载文件，它将花费58 seconds.

4. 通过我的测试代码下载文件。

portal① 从或复制 URL Storage Explore。

像这样的url：<code>https://p*****ge.blob.core.windows.net/testcontainer/StorageExplorer.exe

用我的代码测试过，会1 minute and 52 seconds很费时间，而且很不稳定，有时候测试下载时间会比较长。

② 从 复制网址AzCopy Command。

url格式如下：https://pan********ge.blob.core.windows.net/testcontainer/StorageExplorer.exe?se=2020-09-18T07%3A55%3A28Z&sp=rl&sv=2018-03-28&sr=c&sig=5kJyTBwHHRS******mlj3%2FWj9CmvQriXCMi4%3D

通过相同的代码测试后，它将花费1 minute and 02 seconds.

我的测试结论：

不要使用看起来像https://p*****ge.blob.core.windows.net/testcontainer/StorageExplorer.exe.

您可以使用看起来像从 AzCopy 命令获取的 url。

下面是我的测试代码。

1. npm 我进步了
2. npm i axios

'use strict'

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

async function download () {  
  const url =    'https://pan*****e.blob.core.windows.net/testcontainer/StorageExplorer.exe'

  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, 'software', 'StorageExplorer.exe')
  )
  data.on('data', (chunk) => progressBar.tick(chunk.length))
  data.pipe(writer)
}

download()