mirror of https://github.com/lissy93/dashy
⚡ Update widget mixin to use fetch instead of axios
This commit is contained in:
parent
88498d3887
commit
f353780ad4
|
@ -8,7 +8,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios';
|
|
||||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||||
import { widgetApiEndpoints } from '@/utils/defaults';
|
import { widgetApiEndpoints } from '@/utils/defaults';
|
||||||
|
|
||||||
|
@ -41,11 +40,17 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
/* Make GET request to CoinGecko API endpoint */
|
/* Make GET request to CoinGecko API endpoint */
|
||||||
fetchData() {
|
fetchData() {
|
||||||
axios.get(this.endpoint)
|
fetch(this.endpoint)
|
||||||
.then((response) => {
|
.then(response => {
|
||||||
this.processData(response.data);
|
if (!response.ok) {
|
||||||
|
this.error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
})
|
})
|
||||||
.catch((dataFetchError) => {
|
.then(data => {
|
||||||
|
this.processData(data);
|
||||||
|
})
|
||||||
|
.catch(dataFetchError => {
|
||||||
this.error('Unable to fetch data', dataFetchError);
|
this.error('Unable to fetch data', dataFetchError);
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
@ -71,7 +76,7 @@ export default {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.xkcd-wrapper {
|
.xkcd-wrapper {
|
||||||
.xkcd-title {
|
.xkcd-title {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin: 0.25rem auto;
|
margin: 0.25rem auto;
|
||||||
color: var(--widget-text-color);
|
color: var(--widget-text-color);
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
* Mixin that all pre-built and custom widgets extend from.
|
* Mixin that all pre-built and custom widgets extend from.
|
||||||
* Manages loading state, error handling, data updates and user options
|
* Manages loading state, error handling, data updates and user options
|
||||||
*/
|
*/
|
||||||
import axios from 'axios';
|
|
||||||
import { Progress } from 'rsup-progress';
|
import { Progress } from 'rsup-progress';
|
||||||
import ErrorHandler from '@/utils/ErrorHandler';
|
import ErrorHandler from '@/utils/ErrorHandler';
|
||||||
import { serviceEndpoints } from '@/utils/defaults';
|
import { serviceEndpoints } from '@/utils/defaults';
|
||||||
|
@ -106,27 +105,51 @@ const WidgetMixin = {
|
||||||
const method = protocol || 'GET';
|
const method = protocol || 'GET';
|
||||||
const url = this.useProxy ? this.proxyReqEndpoint : endpoint;
|
const url = this.useProxy ? this.proxyReqEndpoint : endpoint;
|
||||||
const data = JSON.stringify(body || {});
|
const data = JSON.stringify(body || {});
|
||||||
const CustomHeaders = options || null;
|
const CustomHeaders = options || {};
|
||||||
const headers = this.useProxy
|
const headers = new Headers(this.useProxy
|
||||||
? { 'Target-URL': endpoint, CustomHeaders: JSON.stringify(CustomHeaders) } : CustomHeaders;
|
? ({ ...CustomHeaders, 'Target-URL': endpoint })
|
||||||
|
: CustomHeaders);
|
||||||
|
|
||||||
|
// If the request is a GET, delete the body
|
||||||
|
const bodyContent = method.toUpperCase() === 'GET' ? undefined : data;
|
||||||
|
|
||||||
const timeout = this.options.timeout || this.defaultTimeout;
|
const timeout = this.options.timeout || this.defaultTimeout;
|
||||||
|
|
||||||
|
// Setup Fetch request configuration
|
||||||
const requestConfig = {
|
const requestConfig = {
|
||||||
method, url, headers, data, timeout,
|
method,
|
||||||
|
headers,
|
||||||
|
body: bodyContent,
|
||||||
|
signal: undefined, // This will be set below
|
||||||
};
|
};
|
||||||
// Make request
|
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timeoutId = setTimeout(() => controller.abort(), timeout);
|
||||||
|
requestConfig.signal = controller.signal;
|
||||||
|
|
||||||
|
// Make request using Fetch API
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
axios.request(requestConfig)
|
fetch(url, requestConfig)
|
||||||
.then((response) => {
|
.then(async response => {
|
||||||
if (response.data.success === false) {
|
const responseData = await response.json();
|
||||||
this.error('Proxy returned error from target server', response.data.message);
|
if (responseData.error) {
|
||||||
|
this.error('Proxy returned error from target server', responseData.error?.message);
|
||||||
}
|
}
|
||||||
resolve(response.data);
|
if (responseData.success === false) {
|
||||||
|
this.error('Proxy didn\'t return success from target server', responseData.message);
|
||||||
|
}
|
||||||
|
resolve(responseData);
|
||||||
})
|
})
|
||||||
.catch((dataFetchError) => {
|
.catch(error => {
|
||||||
this.error('Unable to fetch data', dataFetchError);
|
if (error.name === 'AbortError') {
|
||||||
reject(dataFetchError);
|
this.error('Request timed out', error);
|
||||||
|
} else {
|
||||||
|
this.error('Unable to fetch data', error);
|
||||||
|
}
|
||||||
|
reject(error);
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
this.finishLoading();
|
this.finishLoading();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue