Improve axios get download speed

Question

I am using axios to download a file (~100MB) from an Azure Storage Blob.

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

My problem is that it is taking quite a while to actually download the file (~10 minutes). I was previously using fetch() which was slower than this even (~15-20 minutes). Are there any recommendations you guys have on how to speed up the download? My internet speed isn't the problem, as downloading the file directly or using the Azure Storage Explorer(1.12.0, AzCopy 10.3.3) takes less than 2 minutes.

I also tried using azure-storage's blobServiceClient, but got similar speeds to axios and fetch (roughly 15kbps).

This is in a React app if that helps.

user_7687666 · Answer

I have test the speed of download. I hope my result can useful to you.

I upload StorageExplorer.exe as source file for download test. The size of file is 92.5M.

Download file by Azure Storage Explore, it will took 1 minute and 07 seconds.

Download file in portal by chrome broswer, it will took 58 seconds.

Download file by my test code.

① Copy Url from portal or Storage Explore.

The url like ：https://p*****ge.blob.core.windows.net/testcontainer/StorageExplorer.exe

After test by my code, it will took 1 minute and 52 seconds and it is very unstable, sometimes the test download time will be longer.

② Copy Url from AzCopy Command.

The url format look like： 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

After test by same code, it will took 1 minute and 02 seconds.

My test conclusion:

Don't use url which look like https://p*****ge.blob.core.windows.net/testcontainer/StorageExplorer.exe.

You can use url which look like get from AzCopy Command.

Below is my test code.

npm i progress

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()

Improve axios get download speed

1 Answers