vue如何优雅地处理网络请求

Question

直接上代码吧

页面部分

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来更改状态还是直接注册个全局方法控制比较好？

Answer 1

1

updated 在视图更新之后触发，所以初始化完成后会触发一波。

所以你这里应该 watch 一个会更新的数据，并且在那个地方更新滚动条。

2

看需求吧，我觉得你的做法没问题

3

也要看需求，如果是单例的弹窗，或者需要统一管理的弹窗，那么全局比较好。如果只是修改组件的某个值那种，就放在组件里自行管理好了。

Answer 2

1. $nextTick应该放在fetchData()的回调里执行

2. 可以放在根组件，请求到数据后，再下发到子组件，触发子组件的更新。个人观点，仅供参考。

3. 调用全局方法看起来逻辑更简洁，但增强了代码耦合性，修改状态的方式更符合数据驱动的处理方式