Axios-module: progress: false does not work in version 5.5.3

[karambafe]

Version

v5.5.3

Reproduction link

https://codesandbox.io/s/8n6z6z30j8

Steps to reproduce

Add progress: false in request config:

this.$axios.get('URL', { progress: false });
this.$axios.post('URL', { data: 'data' }, { progress: false });

What is expected ?

progress bar is not displayed

What is actually happening?

Progress bar displayed for all types of requests (get, post, patch, delete)

Additional comments?

in version 5.3.6 it works correctly

_{This bug report is available on Nuxt community (#c255)}

[levemsan]

It worked just fine until v5.5.2; I think there's a problem on axios 0.19.0.

[delanoflipse]

I did some digging and found that this might indeed be the result of an update in axios. But more in the sense that it shouldn't have worked in earlier versions of this module.

When doing any axios request, axios creates a generic config file to create a request (see: https://github.com/axios/axios/blob/master/lib/core/mergeConfig.js)

It does not include the progress key. The axios onRequest hook that this module uses (see: https://github.com/nuxt-community/axios-module/blob/master/lib/plugin.js, line 108), expects that it does.

Creating a plugin as such:

$axios.onRequest(config => {
  console.log(config.progress);
});

Shows that it is always undefined (as could be expected), so the test config && config.progress === false always fails.

I was unable to find a way to pass custom data to the axios config as of yet.
For now this ugly fix worked:

// https://github.com/nuxt-community/axios-module/blob/master/lib/plugin.js, line 108
axios.onRequest(config => {
  if (config && config.progress === false) {
    return;
  }

  if (config && config.headers && config.headers.__show_no_progress__ === true) {
    delete config.headers.__show_no_progress__;
    return;
  }

  currentRequests++;
});

// works with
$axios.$post(url, payload, { headers: { __show_no_progress__: true } });

[eol3]

I use v5.5.4 have same question.
And use v5.5.2 work fine.

[daniluk4000]

Still not working in 5.6.0

[mrleblanc101]

Hi,
I think this is related, the progress bar is reset for each request.
Instead of getting a single progress bar for all the request in asyncData,
the progress bar is reset for each request (using await) which is not ideal and very ugly.
I created an .onRequest interceptor to disable (progress: false) globally and now it works like intended.

[daniluk4000]

Does your solution work for single requests? If so, can you please share an example of solution so we can use it?

[mrleblanc101]

In a plugin

$axios.onRequest(config => {
    config.progress = false;
});

And I still have the progress bar synced with my asyncData.

Otherwise you can pass it as an argument to your resquest:

$axios.$get(url, { progress: false })

[manniL]

@delanoflipse described the problem quite well, it is an axios issue however. A fix came with https://github.com/axios/axios/pull/2207 but a release is still pending.

You can either wait or downgrade axios (or use a workaround described in this thread).

Update

Looks like there was a regression and the update isn't out yet due to it.
See https://github.com/axios/axios/pull/2207#issuecomment-529163362

[karambafe]

@tomshaw
This solution completely disables the progress bar and it is not suitable if you need to disable the progress bar only for part of the requests

[pi0]

Axios updated. Should be fixed with v5.9.3 .

[jb-alvarado]

The new version is fixing the issue what karambafe have explain. But is there a reason why the progress bar is still coming when axios is running in an setInterval() function?

Here a fork from karambafe:
https://codesandbox.io/s/codesandbox-nuxt-hu20j

[pi0]

@jb-alvarado I'll check it but think the best way is to create a new issue so we can track it easier.

[jb-alvarado]

@pi0, ok, I will create a new issue.

[sowinski]

Please link the issue to this thread. I have the same problem.

[aslamdoctor]

This is still not working for me after using it with post request and headers also included.
But when I added the code below before this.$axios.post, it worked:

this.$axios.onRequest(config => {
      config.progress = false;
});

I am using version 5.12.2