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

【问题标题】：Vue.js cannot set data returned from external axios responseVue.js 无法设置从外部 axios 响应返回的数据
【发布时间】：2018-02-16 15:21:21
【问题描述】：

在 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中的函数实际执行了，response确实得到了数据，console.log(response.data)也打印出来了，但是返回response.data却不能执行，而是跳转到else 块中的 return 语句。很奇怪。我也尝试在线搜索，但找不到将 axios 请求包装在外部文件中以供多个组件使用的示例。

【问题讨论】：

如果您向我们提供更多信息，例如您迄今为止编写的代码，将会有所帮助。
stackoverflow.com/help/how-to-ask
对不起，我没有弄清楚如何在这里发布 js 代码。现在它应该有意义了。

标签： javascript

【解决方案1】：

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

【讨论】：