fix(plugin): hide progress-bar on cancelled requests (#398)

Author: T0shik

lib/plugin.js

@@ -161,6 +161,10 @@ const setupProgress = (axios) => {
     currentRequests--
 
     if (Axios.isCancel(error)) {
+      if (currentRequests <= 0) {
+        currentRequests = 0
+        $loading().finish()
+      }
       return
     }
 

test/fixture/api.js

@@ -1,6 +1,17 @@
+function sleep (ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}
+
 module.exports = {
   path: '/test_api',
-  handler (req, res) {
+  async handler (req, res) {
+    const query = new URL(req.url, 'http://localhost:3000').query
+    if (query && query.delay) {
+      await sleep(query.delay)
+    }
+
     res.end(JSON.stringify({
       url: req.url,
       method: req.method

test/fixture/pages/cancelToken.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    there should be no loading bar left over:
+    <button @click="test">Fake Request</button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    test() {
+      const source = this.$axios.CancelToken.source();
+      this.$axios
+        .$post(
+          "http://localhost:3000/test_api/foo/bar?delay=1000",
+          { data: "test" },
+          {
+            cancelToken: source.token,
+          }
+        )
+        .catch((err) => {
+          if (this.$axios.isCancel(err)) {
+            console.log("request canceled");
+          }
+        });
+
+      setTimeout(function () {
+        source.cancel();
+      }, 500);
+    },
+  },
+};
+</script>