fix: use axios to cancel requests

ui/src/mixins/searchapp.js

@@ -7,12 +7,18 @@ export default {
         return {
             search_apps: [],
             search_apps_ignore: [], //list of apps to ignore (set by the client)
-            xhr_request: null,
+            cancelToken: null,
         }
     },
     methods: {
         search_app(search, loading) {
             loading(true);
+
+            if (this.cancelToken) {
+              this.cancelToken.cancel();
+            }
+            this.cancelToken = this.axios.CancelToken.source();
+
             clearTimeout(debounce);
             debounce = setTimeout(()=>{
                 let find = {
@@ -24,28 +30,26 @@ export default {
                     _id: {$nin: this.search_apps_ignore },
                     removed: false,
                 };
-                this.$http.get(
+                this.axios.get(
                     'app',
                     {
                         params: {
                             find: JSON.stringify(find),
                             populate: 'inputs.datatype outputs.datatype contributors', //to display app detail
                             limit: 100, //freesurfer gives a lot of results..
                         },
-                        beforeSend: function(xhr) {
-                            if (this.xhr_request) {
-                                this.xhr_request.abort();
-                            }
-                            this.xhr_request = xhr;
-                        },
+                        cancelToken: this.cancelToken.token,
                     }
                 )
-                .then(res=>{
-                    if (res.request !== this.xhr_request) {
-                        return;
-                    }
+                .then(res => {
                     this.search_apps = res.data.apps;
+                    this.cancelToken = null;
                     loading(false);
+                })
+                .catch((error) => {
+                  if (!this.axios.isCancel(error)) {
+                    throw error;
+                  }
                 });
             }, 300);
         },