For beginners, es6, calls receiveData. Although it can read data, the returned data is still empty.

module.exports = {

    fetchData( dataUrl, start ) {
        return new Promise((resolve, reject) => {
            fetch(`${dataUrl}/data${(start+ 0 + "").padStart(2, "0")}.json`)
                .then((data) => {
                    resolve(data.json());
                }, (error) => {
                    reject(error);
                })
        });

    },

    async getData( dataUrl, start ) {

        const _self = this;
        let data = await _self.fetchData( dataUrl, start );
        return data;

    },
    
    receiveData( dataUrl, start ) {
        const _self = this;
        let data = {};

        _self.getData("virtual/result", 2).then(
            function(responseThenData) {
                data = responseThenData;
            })
            .then(function() {
                //console.log("abc")
            })
            .catch(function(e) {
                console.log("promise, error =", e);
            });
        
        return data;
    }


}

I want to return the data is the read data, how to modify it?

Es6 javascript es5

Apr.07,2021

receiveData( dataUrl, start ) {
        const _self = this;

        _self.getData('virtual/result', 2)
            .catch(function(e) {
                console.log("promise, error =", e);
            });
        
        
    }
    


const data = await receiveData();
console.log(data);

your getData is asynchronous. When you call receiveData, you will directly return an empty Data, because your data assignment is done in the asynchronous callback, but your return is not in the callback. You should also change receiveData to async, and then use await

when calling it.

async receiveData( dataUrl, start ) {
        const _self = this;

        return _self.getData('virtual/result', 2)       
    }
    
let data = await receiveData() 
// 
receiveData.then(
            function(responseThenData) {
                //responseThenData;
            })
            .then(function() {
                //console.log('abc')
            })
            .catch(function(e) {
                console.log("promise, error =", e);
            });

is about this change

Previous: Vue common components

Next: Or is it a problem with vue routing?