vue.js - vue如何优雅地处理网络请求
本文介绍了vue.js - vue如何优雅地处理网络请求的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
直接上代码吧
页面部分
methods: {
fetchData () {
this.$store.dispatch('AC_GetNewData')
}
},
computed: {
...mapGetters({
list: 'list',
listLength: 'listLength'
})
},
mounted: function () {
this.fetchData()
},
updated: function () {
this.$nextTick(() => {
this.$refs.scroller.reset({
top: 0
})
})
},
api 部分
GetNewData: function () {
return Vue.http.get('/apis/api/getNew')
.then(function (data) {
if (data.status === 200) {
return data.body
}
})
}
vuex 部分
AC_GetNewData: ({commit}, data) => {
commit('UPDATE_LOADING', true)
api.GetNewData(data)
.then((res) => {
res
? commit(type.GET_NEW_DATA, res)
: console.log('网络错误')
commit('UPDATE_LOADING', false)
})
.catch((error) => {
console.log(error)
})
}
提问:
1:我想在fetchData()之后执行$nextTick的任务,但总是一起执行了
2:像这样请求网络,逻辑主要放在哪层做比较好?
3:对于弹窗这些东西,是用提交commit来更改状态还是直接注册个全局方法控制比较好?
解决方案
1
updated
在视图更新之后触发,所以初始化完成后会触发一波。
所以你这里应该 watch
一个会更新的数据,并且在那个地方更新滚动条。
2
看需求吧,我觉得你的做法没问题
3
也要看需求,如果是单例的弹窗,或者需要统一管理的弹窗,那么全局比较好。如果只是修改组件的某个值那种,就放在组件里自行管理好了。
这篇关于vue.js - vue如何优雅地处理网络请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文