axios-mock-adapter with vue.$nextTick
HTML
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios-mock-adapter.js"></script>
<div id="app"></div>
JavaScript
var mockAxios = new AxiosMockAdapter(axios);
const mock = {
msg: 'Mock Axios!'
}
// fake request
mockAxios.onGet('/api/msg').reply(200, mock)
var vm = new Vue({
template: '<div> \
{{msg}} \
<p v-for="(log, index) of logs">{{ index + 1 }} {{ log }}</p> \
</div>',
data: function() {
return {
msg: '',
logs: []
}
},
beforeCreate: function() {
this.msg = 'beforeCreate'
axios.get('/api/msg').then((data) => {
this.msg = 'beforeCreate: ' + data.data.msg
})
},
created: function() {
this.msg = 'created'
axios.get('/api/msg').then((data) => {
this.msg = 'created: ' + data.data.msg
})
},
beforeMount: function() {
this.msg = 'beforeMount'
axios.get('/api/msg').then((data) => {
this.msg = 'beforeMount: ' + data.data.msg
})
},
mounted: function() {
this.msg = 'mounted'
axios.get('/api/msg').then((data) => {
this.msg = data.data.msg
})
}
})
vm.$mount('#app')
// 1. mounted
// 5. beforeMount: Mock Axios!
cb()
function cb() {
vm.$data.logs.push(vm.msg)
//if (vm.msg !== mock.msg)
vm.$nextTick(cb)
//}
// vm.$mount('#app')
// 1. created
// 5. created: Mock Axios!
/*
vm.$nextTick(() => {
console.log(vm.msg, 1) // 1
vm.$nextTick(() => {
console.log(vm.msg, 2) // 2
vm.$nextTick(() => {
console.log(vm.msg, 3) // 3
vm.$nextTick(() => {
console.log(vm.msg, 4) // Mock Axios! 4
})
})
})
})
*/