Remove axios

package.json

@@ -38,7 +38,6 @@
     "@vue/compiler-sfc": "3.1.5",
     "@vuelidate/core": "^2.0.0-alpha.14",
     "@vuelidate/validators": "^2.0.0-alpha.12",
-    "axios": "^0.19.0",
     "babel-eslint": "^10.1.0",
     "chart.js": "3.3.2",
     "codesandbox": "2.1.14",

src/service/CountryService.js

@@ -1,8 +1,7 @@
-import axios from 'axios'
-
 export default class CountryService {
 
     getCountries() {
-        return axios.get('demo/data/countries.json').then(res => res.data.data);
+        return fetch('demo/data/countries.json').then(res => res.json())
+            .then(d => d.data);
     }
-}
+}

src/service/CustomerService.js

@@ -1,24 +1,27 @@
-import axios from 'axios'
-
 export default class CustomerService {
 
-	getCustomersSmall() {
+    getCustomersSmall() {
-		return axios.get('demo/data/customers-small.json').then(res => res.data.data);
+        return fetch('demo/data/customers-small.json').then(res => res.json())
-  }
+                .then(d => d.data);
+    }
 
-  getCustomersMedium() {
+    getCustomersMedium() {
-		return axios.get('demo/data/customers-medium.json').then(res => res.data.data);
+        return fetch('demo/data/customers-medium.json').then(res => res.json())
-  }
+                .then(d => d.data);
+    }
 
-  getCustomersLarge() {
+    getCustomersLarge() {
-		return axios.get('demo/data/customers-large.json').then(res => res.data.data);
+        return fetch('demo/data/customers-large.json').then(res => res.json())
-  }
+                .then(d => d.data);
+    }
 
-  getCustomersXLarge() {
+    getCustomersXLarge() {
-		return axios.get('demo/data/customers-xlarge.json').then(res => res.data.data);
+        return fetch('demo/data/customers-xlarge.json').then(res => res.json())
-  }
+                .then(d => d.data);
-  
+    }
-  getCustomers(params) {
+
-    return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
+    getCustomers(params) {
-  }
+        const queryParams = Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&');
-}
+        return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
+    }
+}

src/service/EventService.js

@@ -1,8 +1,7 @@
-import axios from 'axios';
-
 export default class EventService {
 
     getEvents() {
-        return axios.get('demo/data/events.json').then(res => res.data.data);
+        return fetch('demo/data/events.json').then(res => res.json())
+                .then(d => d.data);
     }
-}
+}

src/service/NodeService.js

@@ -1,15 +1,12 @@
-import axios from 'axios';
-
 export default class NodeService {
 
     getTreeTableNodes() {
-        return axios.get('demo/data/treetablenodes.json')
+        return fetch('demo/data/treetablenodes.json').then(res => res.json())
-                .then(res => res.data.root);
+                .then(d => d.root);
     }
 
     getTreeNodes() {
-        return axios.get('demo/data/treenodes.json')
+        return fetch('demo/data/treenodes.json').then(res => res.json())
-                .then(res => res.data.root);
+                .then(d => d.root);
     }
-
+}
-}

src/service/PhotoService.js

@@ -1,9 +1,7 @@
-import axios from 'axios'
-
 export default class PhotoService {
 
 	getImages() {
-        return axios.get('demo/data/photos.json')
+        return fetch('demo/data/photos.json').then(res => res.json())
-                .then(res => res.data.data);
+                .then(d => d.data);
     }
 }

src/service/ProductService.js

@@ -1,16 +1,14 @@
-import axios from 'axios';
-
 export default class ProductService {
 
     getProductsSmall() {
-		return axios.get('demo/data/products-small.json').then(res => res.data.data);
+		return fetch('demo/data/products-small.json').then(res => res.json()).then(d => d.data);
 	}
 
 	getProducts() {
-		return axios.get('demo/data/products.json').then(res => res.data.data);
+		return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
     }
 
     getProductsWithOrdersSmall() {
-		return axios.get('demo/data/products-orders-small.json').then(res => res.data.data);
+		return fetch('demo/data/products-orders-small.json').then(res => res.json()).then(d => d.data);
 	}
 }

src/views/datatable/DataTableDoc.vue

@@ -11,23 +11,21 @@ import ColumnGroup from 'primevue/columngroup';     //optional for column groupi
 
             <h5>Getting Started</h5>
             <p>DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable.
-                Cars are loaded by a CarService that connects to a server to fetch the cars with a axios. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.</p>
+                Cars are loaded by a CarService that connects to a server to fetch the cars with a fetch API. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.</p>
 
             <pre v-code.script><code>
-import axios from 'axios'
-
 export default class CarService {
 
 	getCarsSmall() {
-		return axios.get('demo/data/cars-small.json').then(res => res.data.data);
+		return fetch.get('demo/data/cars-small.json').then(res => res.json()).then(d => d.data);
 	}
 
 	getCarsMedium() {
-		return axios.get('demo/data/cars-medium.json').then(res => res.data.data);
+		return fetch.get('demo/data/cars-medium.json').then(res => res.json()).then(d => d.data);
 	}
 
 	getCarsLarge() {
-		return axios.get('demo/data/cars-large.json').then(res => res.data.data);
+		return fetch.get('demo/data/cars-large.json').then(res => res.json()).then(d => d.data);
 	}
 }
 

src/views/galleria/GalleriaDoc.vue

@@ -121,12 +121,11 @@ import Galleria from 'primevue/galleria';
 </div>
 
 <pre v-code.script><code>
-import axios from 'axios'
-
 export default class PhotoService {
 
 	getImages() {
-        return axios.get('demo/data/photos.json').then(res => res.data.data);
+        return fetch('demo/data/photos.json').then(res => res.json())
+                .then(d => d.data);
     }
 }
 

src/views/icons/Icons.vue

@@ -98,8 +98,6 @@ export default {
 </template>
 
 <script>
-import axios from 'axios';
-
 export default {
     data() {
         return {
@@ -108,19 +106,20 @@ export default {
         }
     },
     mounted() {
-        axios.get('demo/data/icons.json').then(res => {
+        fetch('demo/data/icons.json', { headers: { 'Cache-Control' : 'no-cache' } }).then(res => res.json())
-            let icons = res.data.icons;
+            .then(d => {
-            icons.sort((icon1, icon2) => {
+                let icons = d.icons;
-                if(icon1.properties.name < icon2.properties.name)
+                icons.sort((icon1, icon2) => {
-                    return -1;
+                    if(icon1.properties.name < icon2.properties.name)
-                else if(icon1.properties.name < icon2.properties.name)
+                        return -1;
-                    return 1;
+                    else if(icon1.properties.name < icon2.properties.name)
-                else
+                        return 1;
-                    return 0;
+                    else
-            });
+                        return 0;
+                });
 
-            this.icons = icons;
+                this.icons = icons;
-        });
+            });
     },
     computed: {
         filteredIcons() {

src/views/liveeditor/LiveEditor.vue

@@ -94,7 +94,6 @@ export default {
                             dependencies: {
                                 ...extDependencies,
                                 'vue': dependencies['vue'],
-                                'axios': dependencies['axios'],
                                 'primevue': '^3.7.2',
                                 'primeflex': dependencies['primeflex'],
                                 'primeicons': dependencies['primeicons'],

src/views/liveeditor/LiveEditorData.js

@@ -1,99 +1,90 @@
 const services = {
     'CountryService': `
-import axios from 'axios'
-
 export default class CountryService {
-    
+
     getCountries() {
-        return axios.get('data/countries.json').then(res => res.data.data);
+        return fetch('demo/data/countries.json').then(res => res.json())
+            .then(d => d.data);
     }
-}    
+}
     `,
     'CustomerService': `
-import axios from 'axios'
-
 export default class CustomerService {
-    
+
     getCustomersSmall() {
-        return axios.get('data/customers-small.json').then(res => res.data.data);
+        return fetch('demo/data/customers-small.json').then(res => res.json())
+                .then(d => d.data);
     }
-    
+
     getCustomersMedium() {
-        return axios.get('data/customers-medium.json').then(res => res.data.data);
+        return fetch('demo/data/customers-medium.json').then(res => res.json())
+                .then(d => d.data);
     }
-    
+
     getCustomersLarge() {
-        return axios.get('data/customers-large.json').then(res => res.data.data);
+        return fetch('demo/data/customers-large.json').then(res => res.json())
+                .then(d => d.data);
     }
-    
+
     getCustomersXLarge() {
-        return axios.get('data/customers-xlarge.json').then(res => res.data.data);
+        return fetch('demo/data/customers-xlarge.json').then(res => res.json())
+                .then(d => d.data);
     }
-      
+
     getCustomers(params) {
-        return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
+        const queryParams = Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&');
+        return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
     }
 }
     `,
     'EventService': `
-import axios from 'axios';
-
 export default class EventService {
 
     getEvents() {
-        return axios.get('data/events.json').then(res => res.data.data);
+        return fetch('demo/data/events.json').then(res => res.json())
+                .then(d => d.data);
     }
 }
     `,
     'NodeService': `
-import axios from 'axios';
-
 export default class NodeService {
-    
+
     getTreeTableNodes() {
-        return axios.get('data/treetablenodes.json')
+        return fetch('demo/data/treetablenodes.json').then(res => res.json())
-            .then(res => res.data.root);
+                .then(d => d.root);
     }
-    
+
     getTreeNodes() {
-        return axios.get('data/treenodes.json')
+        return fetch('demo/data/treenodes.json').then(res => res.json())
-            .then(res => res.data.root);
+                .then(d => d.root);
     }
-    
 }
     `,
     'PhotoService': `
-import axios from 'axios'
-
 export default class PhotoService {
 
     getImages() {
-        return axios.get('data/photos.json')
+        return fetch('demo/data/photos.json').then(res => res.json())
-            .then(res => res.data.data);
+                .then(d => d.data);
     }
 }
 `,
     'ProductService': `
-import axios from 'axios';
-
 export default class ProductService {
 
     getProductsSmall() {
-        return axios.get('data/products-small.json')
+		return fetch('demo/data/products-small.json').then(res => res.json()).then(d => d.data);
-            .then(res => res.data.data);
+	}
-    }
 
-    getProducts() {
+	getProducts() {
-        return axios.get('data/products.json')
+		return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
-            .then(res => res.data.data);
     }
 
     getProductsWithOrdersSmall() {
-        return axios.get('data/products-orders-small.json')
+		return fetch('demo/data/products-orders-small.json').then(res => res.json()).then(d => d.data);
-            .then(res => res.data.data);
+	}
-    }
 }
-    
+
     `
 }
 

src/views/tree/TreeDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeDemo.vue"> 
+	<AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Tree from 'primevue/tree';
@@ -112,12 +112,11 @@ export default {
 </code></pre>
 
 <pre v-code.script><code>
-import axios from 'axios';
-
 export default class NodeService {
 
     getTreeNodes() {
-        return axios.get('demo/data/treenodes.json').then(res => res.data.root);
+       return fetch('demo/data/treenodes.json').then(res => res.json())
+                .then(d => d.root);
     }
 
 }
@@ -895,4 +894,4 @@ button {
         }
     }
 }
-</script>
+</script>

src/views/treeselect/TreeSelectDoc.vue

@@ -38,12 +38,11 @@ export default {
 </code></pre>
 
 <pre v-code.script><code>
-import axios from 'axios';
-
 export default class NodeService {
 
     getTreeNodes() {
-        return axios.get('demo/data/treenodes.json').then(res => res.data.root);
+        return fetch('demo/data/treenodes.json').then(res => res.json())
+                .then(d => d.root);
     }
 
 }
@@ -587,7 +586,7 @@ export default {
         const selectedNode = ref();
         const selectedNodes1 = ref();
         const selectedNodes2 = ref();
-       
+
         return { options, selectedNode, selectedNodes1, selectedNodes2 };
     }
 }

src/views/treetable/TreeTableDoc.vue

@@ -93,12 +93,11 @@ export default {
 </code></pre>
 
 <pre v-code.script><code>
-import axios from 'axios';
-
 export default class NodeService {
 
     getTreeTableNodes() {
-        return axios.get('demo/data/treetablenodes.json').then(res => res.data.root);
+        return fetch('demo/data/treetablenodes.json').then(res => res.json())
+                .then(d => d.root);
     }
 
 }
@@ -1074,7 +1073,7 @@ export default {
 </code></pre>
 
             <h6>Flex Scroll</h6>
-            <p>In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing. 
+            <p>In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing.
             FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size for full page scroll.</p>
 <pre v-code><code><template v-pre>
 &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
@@ -1898,4 +1897,4 @@ button {
         }
     }
 }
-</script>
+</script>