Vue 组件中类似 Promise 的 Axios 请求

Question

我想以 promise 方式发出 Axios 请求。 Axios 请求在 'dataLayer.js' 中完成。问题是我的 'dataPromise' 已经满了。我如何必须在数据层 class 中扩展 '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，return axios 承诺 map 在 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 没有 return 承诺。

应该在使用 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简化重写。

Vue 组件中类似 Promise 的 Axios 请求

Promise-like Axios request in Vue component

javascript

vue.js

es6-promise

axios