Use Axios instead of Fetch with Cache API

Question

I am successfully using fetch to download an image file and store in a custom cache:

await fetch(url).then( async (response) => {
  if (!response.ok) {
    throw new TypeError("Bad response status");
  }

  return cache.put(url, response);
});

I would like to switch this to axios so I can display download progress and stop the download if needed. I am able to successfully download the file:

await axios({
  method: 'get',
  url: url,
  responseType: 'blob'
}).then( async (response) => {
  if (!response.ok) {
    throw new TypeError("Bad response status");
  }

  return cache.put(url, response);
});

But it returns and error: Failed to execute 'put' on 'Cache': parameter 2 is not of type 'Response'.

Referencing this question I also tried to manually create the response:

var init = { status: 200 , statusText: 'OK', type: 'cors', url };
var myResponse = new Response(response, init);
return cache.put(url, myResponse);

But it seems to override the other information and doesn't store the blob data at all:

Is axios able to create the type of response that is needed for the Cache API?

Edited to add: I've also tried changing the responseType to stream which is what fetch seems to return, but that didn't work either.