Question

在Vue.js组件中，我想显示用户列表：这段代码在进行axios调用后确实正确设置了tableData。

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,
    },
}

但是，如果我将axios代码片段包装到另一个文件中的另一个函数中，那么它就无法返回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,
    },
}

在Utils.js文件中，函数如下所示：

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);
    });
}

Utils.js中的函数实际执行并且响应确实获取了数据，console.log（response.data）也被打印出来，但是返回响应.data无法执行，而是程序跳转到else块中的return语句。很奇怪。我还尝试在线搜索，但找不到在外部文件中包装axios请求以供多个组件使用的示例。

Answer 1

我在Vue.js论坛上问了同样的问题并得到了正确的答案。请参阅https://forum.vuejs.org/t/cannot-get-data-from-axios-request/18977

Vue.js无法设置从外部axios响应中返回的数据

1 个答案: