Javascript Vue.js无法设置从外部axios响应返回的数据
在Vue.js组件中,我想显示用户列表: 这段代码在进行axios调用后确实正确设置了tableData。Javascript Vue.js无法设置从外部axios响应返回的数据,javascript,Javascript,在Vue.js组件中,我想显示用户列表: 这段代码在进行axios调用后确实正确设置了tableData。 export default { data: function() { return { tableData: [], tableColumns: [ {show: 'firstName', label: 'First Name', dataType: ''},
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代码段包装到另一个文件中的另一个函数中,则它无法返回响应。数据:
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)也会被打印出来,但是return response.data无法执行,相反,程序会跳转到else块中的return语句。很奇怪。我还尝试在线搜索,但找不到将axios请求封装在外部文件中供多个组件使用的示例 我在Vue.js论坛上问了同样的问题,得到了正确的答案。请参阅如果您向我们提供更多信息,例如您迄今为止编写的代码,这将有所帮助。很抱歉,我不知道如何在此处发布js代码。现在它应该有意义了。