我想从mixin调用带有this.request(url)
的axios(为了简化和集中同一文件中有关axios的所有内容),但它无效。
Vue文件:
export default {
name: "employees-list",
data() {
return {
employees: []
}
},
mounted() {
this.employees = this.request('https://jsonplaceholder.typicode.com/posts');
}
}
Request.js
Vue.mixin({
methods: {
request: function (url) {
axios.get(url)
.then(response => {
return response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
});
员工是“未定义的”。
我认为问题是异步或等待,但我不明白。
答案 0 :(得分:4)
看起来您希望mixin创建一个检索数据的通用方法。在这种情况下,您需要从request
方法返回promise并在成功回调中处理结果数据。
这是一个有效的例子。
console.clear()
const EmployeesList = {
name: "employees-list",
template: `
<ul>
<li v-for="employee in employees">{{employee.title}}</li>
</ul>
`,
data() {
return {
employees: []
}
},
mounted() {
// obviously using posts here as an example instead of
// employees.
this.request('https://jsonplaceholder.typicode.com/posts')
// handle the promise success
.then(e => this.employees = e);
}
}
Vue.mixin({
methods: {
request: function(url) {
// return the promise
return axios.get(url)
.then(response => {
return response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
});
new Vue({
el: "#app",
components: {
EmployeesList
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<employees-list></employees-list>
</div>
答案 1 :(得分:0)
试试这个:
new Vue({
el: '#root',
data: {
employees: []
},
methods: {
request(url){
return new Promise((resolve, _) => {
axios.get(url)
.then(res => {
resolve(res);
}).catch(err => {
// err management
});
});
}
},
mounted(){
this.request('https://jsonplaceholder.typicode.com/posts').then(res => {
this.employees = res;
})
}
})