Remove axios

pull/1664/head
mertsincan 2021-10-05 10:41:07 +03:00
parent 34d6fc9e37
commit 642d82d132
15 changed files with 104 additions and 128 deletions

View File

@ -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",

View File

@ -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);
}
}
}

View File

@ -1,24 +1,27 @@
import axios from 'axios'
export default class CustomerService {
getCustomersSmall() {
return axios.get('demo/data/customers-small.json').then(res => res.data.data);
}
getCustomersSmall() {
return fetch('demo/data/customers-small.json').then(res => res.json())
.then(d => d.data);
}
getCustomersMedium() {
return axios.get('demo/data/customers-medium.json').then(res => res.data.data);
}
getCustomersMedium() {
return fetch('demo/data/customers-medium.json').then(res => res.json())
.then(d => d.data);
}
getCustomersLarge() {
return axios.get('demo/data/customers-large.json').then(res => res.data.data);
}
getCustomersLarge() {
return fetch('demo/data/customers-large.json').then(res => res.json())
.then(d => d.data);
}
getCustomersXLarge() {
return axios.get('demo/data/customers-xlarge.json').then(res => res.data.data);
}
getCustomers(params) {
return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
}
}
getCustomersXLarge() {
return fetch('demo/data/customers-xlarge.json').then(res => res.json())
.then(d => d.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())
}
}

View File

@ -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);
}
}
}

View File

@ -1,15 +1,12 @@
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);
}
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);
}
}
}

View File

@ -1,9 +1,7 @@
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);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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 => {
let icons = res.data.icons;
icons.sort((icon1, icon2) => {
if(icon1.properties.name < icon2.properties.name)
return -1;
else if(icon1.properties.name < icon2.properties.name)
return 1;
else
return 0;
});
fetch('demo/data/icons.json', { headers: { 'Cache-Control' : 'no-cache' } }).then(res => res.json())
.then(d => {
let icons = d.icons;
icons.sort((icon1, icon2) => {
if(icon1.properties.name < icon2.properties.name)
return -1;
else if(icon1.properties.name < icon2.properties.name)
return 1;
else
return 0;
});
this.icons = icons;
});
this.icons = icons;
});
},
computed: {
filteredIcons() {

View File

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

View File

@ -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')
.then(res => res.data.root);
return fetch('demo/data/treetablenodes.json').then(res => res.json())
.then(d => d.root);
}
getTreeNodes() {
return axios.get('data/treenodes.json')
.then(res => res.data.root);
return fetch('demo/data/treenodes.json').then(res => res.json())
.then(d => d.root);
}
}
`,
'PhotoService': `
import axios from 'axios'
export default class PhotoService {
getImages() {
return axios.get('data/photos.json')
.then(res => res.data.data);
return fetch('demo/data/photos.json').then(res => res.json())
.then(d => d.data);
}
}
`,
'ProductService': `
import axios from 'axios';
export default class ProductService {
getProductsSmall() {
return axios.get('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('data/products.json')
.then(res => res.data.data);
getProducts() {
return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
}
getProductsWithOrdersSmall() {
return axios.get('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);
}
}
`
}

View File

@ -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>

View File

@ -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 };
}
}

View File

@ -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>