Promise-like Axios request in Vue component

Question

I want make an Axios request in a promise-style way. The Axios-request is done in 'dataLayer.js'. The problem is my 'dataPromise' is already fullfilled. How do I have to extend 'createChargingStations()' in data Layer class to make a Promise-like call so I can handle the data in SFC with '.then()' as shown below?

Thx a lot!

// dataLayer.js
export class modelFactory {  
    chargingStationsArray = []

    createChargingStations() {
        const requestPromise = axios.request(/* some request config */)
        const dataPromise = requestPromise.then(response => {
            response.data.forEach(dataEntry => {
                let cs = new chargingStation()
                /* some data mapping and transformation here */
                /* ... */
                
                // after tranformation, finally push chargingStation object
                this.chargingStationsArray.push(cs)
            })
        }).catch(error => {
            console.log("Promise Rejected: " + error);
        })
    }
}

// SFC.vue
<template> <!-- some template --> </template>

<script>
export default {
    /* name, components, data() etc. */
    methods: {
        updateMapOnFilterChange() {
            var mf = new modelFactory()
            const promise = mf.createChargingStations()
            
            promise.then(chargingStationsArray => {
                /* inject array into Vue component property */
            }).catch(error => {
               console.log("Promise Rejected: " + error);
            })
        }
    }
}
</script>

EDIT: Published the long version of the code here https://jsfiddle.net/3azdnc4j/ You may get a better grasp what the code is supposed to do. But in my opinion it is not necessary for the basic problem!

Answer 1

Export ModelFactory from dataLayer service, return the axios promise with mapped response inside createChargingStations.

// dataLayer.js
class ModelFactory {  

    createChargingStations() {
        return axios.request(/* some request config */).then(response => {
            const chargingStationsArray = response.data.map(dataEntry => {
                let cs = new chargingStation()
                /* some data mapping and transformation here */
                /* ... */
                
                // after tranformation, finally push chargingStation object
                return cs
            })
            return chargingStationsArray
        }).catch(error => {
            console.log("Promise Rejected: " + error);
            throw new Error('some error')
        })
    }
}

export default new ModelFactory()

and import in the vue file.

// SFC.vue
<template> <!-- some template --> </template>

<script>
import modelFactoryInstance from 'path-to-file/dataLayer'

export default {
    /* name, components, data() etc. */
    methods: {
        updateMapOnFilterChange() {
            modelFactoryInstance.createChargingStations().then(chargingStationsArray => {
            console.log(chargingStationsArray)
                /* inject array into Vue component property */
            }).catch(error => {
               console.log("Promise Rejected: " + error);
            })
        }
    }
}
</script>