记一次错: 将 Vue 里异步请求封装得更优雅

前言

以前我一直是没想到这两个东西是可以联系起来的。因为一般来说异步请求数据都是放在 mounted 里,等拿到数据之后再去更新 Vuex 里的数据。能用吗?能用。好用吗?还可以。但是今天我看到 django-vue-template 的代码时感觉以前的方式真的不太优美。

以前的方法

首先在 mounted 里去请求:

mounted() {
  // 先发请求
  this.$axios.get('/users')
    .then((response) => {
        this.$store.commit('getUsers', users)
    })
}

好像没机会用到 Action 呀,Mutation 就搞完了。

更优雅的方法

上面的 Github 给了一个更优雅的方法,直接将异步请求封装好。

初始化

首先在 api.js 里初始化 axios,这样每次就不用再写一遍请求头了,或者别的配置信息。

// api.js
export default axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    'X-CSRFToken': Cookies.get('csrftoken')
  }
})

暴露接口

然后在 services 文件夹下暴露一个 API 接口。这里相当于做了中间件,将 response.data 传递到下一个 Promise 里,并返回这个 Promise,调用的时候就可以直接获取 response.data 了。

// usersService.js
export default {
  fetchUsers() {
    return api.get(`users/`)
              .then(response => response.data)
  }
}

调用

关键是怎么去调用,还是在 mounted 里直接调用?本质上是的,但是这个 Github 将它写在了 Vuex 的 store 里。

// /store/user.js
const state = {
  users: []
}

const getters = {
  messages: state => {
    return state.users
  }
}

const mutations = {
  setUsers (state, users) {
    state.users= users
  }
}

const actions = {
  getUsers ({ commit }) {
    userService.fetchUsers()
    .then(users => {
      commit('setUsers', users)
    })
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

这样一来就用到了 Vuex 的 actions 了。

mounted

最后在 mounted 里去 dispatch 这个 action 就可以了。

mounted() {
  this.$store.dispatch('users/getUsers')
}

总结

总结一下流程。

  1. 初始化 axios
  2. 暴露 API
  3. mounted 分发 action
  4. 调用 userService 发异步请求
  5. 获取结果后 commit mutations 改变 store 里的数据

可能有人说搞那么复杂,原来就几句,到你这变了几十行。如果是小项目当然搞太复杂了,过早优化是万恶之源,所以当 API 很少项目不大的时候确实以前的写法很方便。但是项目一大,API 剧增,又要用到 Vuex 那第二种是明显更优雅一点的。同时你不太需要关心向哪个 API 发请求,你只需要知道分发了哪个 action 就可以了。

推荐阅读更多精彩内容