Vue 组件中类似 Promise 的 Axios 请求

Question

我想以 Promise 风格的方式发出 Axios 请求。 Axios 请求在“dataLayer.js”中完成。 问题是我的“dataPromise”已经满了。 如何在数据层类中扩展“createChargingStations()”以进行类似 Promise 的调用，以便可以使用“.then()”处理 SFC 中的数据，如下所示？

非常感谢！

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

编辑：在这里发布了代码的长版本https://jsfiddle.net/3azdnc4j/ 您可能会更好地掌握代码应该做什么。但在我看来，基本问题没有必要！

Answer 1

从dataLayer 服务导出ModelFactory，返回axios 承诺，在mapped 响应内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()

并导入vue文件。

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

Answer 2

代码将在const promise = mf.createChargingStations() 失败，因为createChargingStations 没有返回承诺。

应该在使用 promise 时处理错误，在 createChargingStations 内处理它会使其通过 undefined 解决。

promise 无法与 chargingStationsArray 解析。

应该是：

createChargingStations() {
    const requestPromise = axios.request(/* some request config */)
    const dataPromise = requestPromise.then(response => {
        ...
    });
    return dataPromise;
}

和

updateMapOnFilterChange() {
    var mf = new modelFactory()
    const promise = mf.createChargingStations()
    
    promise.then(() => {
        mf.chargingStationsArray.forEach(...)
    }).catch(error => {
       console.log("Promise Rejected: " + error);
    })
}

createChargingStations 和updateMapOnFilterChange 都可以用async..await 以简化的方式重写。