rikmms / progress-bar-4-axios

Slim progress bar (NProgress) for Web applications that use Axios library for HTTP requests
MIT License
246 stars 32 forks source link

It doesn't work with status 201 #2

Closed MohamedAmrAbuelhassan closed 6 years ago

MohamedAmrAbuelhassan commented 6 years ago

If response status is 201, the bar never stops.

rikmms commented 6 years ago

Hi, @MohamedAmrAbuelhassan.

In my tests, the bar is OK even for requests where the responses have the status code 201. Can you give me more information? Like the version of "axios" and "axios-progress-bar" you use?

Here is my test example (with the latest version), if it helps:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>TEST ENV</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/master/dist/nprogress.css" />
  </head>
  <body>
    <h3>Use <a href="https://reqres.in/">Reqres</a> for testing...</h3>
    <button onclick="getResource()">Get Resource</button>
    <button onclick="resourceNotFound()">Resource Not Found</button>
    <button onclick="createResource()">Create Resource</button>
    <button onclick="unsuccessfulCreateResource()">Unsuccessful Create Resource</button>
    <button onclick="delayedResponse()">Delayed Response</button>
    <button onclick="downloadFile()">Download File</button>
  </body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
  <script src="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/master/dist/index.js"></script>
  <script type="text/javascript">

    loadProgressBar()

    function getResource() {
      getRequest('https://reqres.in/api/users?page=1')
    }

    function resourceNotFound() {
      getRequest('https://reqres.in/api/unknown/23')
    }

    function delayedResponse() {
      getRequest('https://reqres.in/api/users?delay=3')
    }

    function createResource() {
      postRequest('https://reqres.in/api/users', { name: 'morpheus', job: 'leader' })
    }

    function unsuccessfulCreateResource() {
      postRequest('https://reqres.in/api/register', { email: 'sydney@fife' })
    }

    function downloadFile() {
      getRequest('https://media.giphy.com/media/C6JQPEUsZUyVq/giphy.gif')
    }

    function getRequest(url) {
      axios.get(url)
      .then(function (response) {
        console.log(response)
      })
      .catch(function (error) {
        console.log(error)
      })
    }

    function postRequest(url, form) {
      axios.post(url, form)
      .then(function (response) {
        console.log(response)
      })
      .catch(function (error) {
        console.log(error)
      })
    }

  </script>
</html>

Attention: this new version has a major change. The minimal CSS file is now in a separated file (https://github.com/rikmms/progress-bar-4-axios/issues/1).