Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
386 views
in Technique[技术] by (71.8m points)

javascript - Vue.js cannot set data returned from external axios response

In a Vue.js component I want to display the user list: This piece of code does set the tableData correctly after making the axios call.

export default {
    data: function() {
        return {
            tableData: [],
            tableColumns: [
                {show: 'firstName', label: 'First Name', dataType: ''},
                {show: 'lastName', label: 'Last Name', dataType: ''},
            ],
            showFilter: true,
        }
    },
    beforeMount: function(){
        axios({
            method: 'get',
            url: '/api/admin/users',
            dataType: 'json',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
        })
        .then( (response) => {
            var status = response.status;
            if(status == 200 || status == "200"){
                console.log(response.data)
                this.tableData = response.data
            }
            else{
                alert("not 200");
                this.tableData = response.data
            }                                   
        })
        .catch( (error) => {
            console.log(error);
        });  
    },
    components: {
        VueDataTable,
    },
}

However, if I wrap the axios code piece into another function in another file, then it cannot return the response.data:

export default {
    data: function() {
        return {
            tableData: [],
            tableColumns: [
                {show: 'firstName', label: 'First Name', dataType: ''},
                {show: 'lastName', label: 'Last Name', dataType: ''},
            ],
            showFilter: true,
        }
    },
    beforeMount: function(){
        this.tableData = Utils.getUserList()
    },
    components: {
        VueDataTable,
    },
}

In the file Utils.js, the function looks like this:

export function getUserList(data) {
    axios({
        method: 'get',
        url: '/api/admin/users',
        dataType: 'json',
        headers: {'X-Requested-With': 'XMLHttpRequest'},
    })
    .then( (response) => {
        var status = response.status;
        if(status == 200 || status == "200"){
            console.log(response.data)
            data = response.data
        }
        else{
            alert("not 200");
            return;
        }                                   
    })
    .catch( (error) => {
        console.log(error);
    });
}

The function in Utils.js is actually executed and the response does get the data, the console.log(response.data) also gets printed out, but the return response.data CANNOT get executed, instead, the program jumps to the return statement in the else block. Very weird. I also tried to search online but could not find an example that wraps an axios request in an external file to be used by multiple components.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I asked the same question at Vue.js forum and got the correct answer. Please refer to https://forum.vuejs.org/t/cannot-get-data-from-axios-request/18977


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...