Vue项目中Api的组织和返回数据处理

项目中的全部Api配置放在一个文件中，便于查找和修改，Api的版本从配置文件(config.js)中读取，采用apiPrefix + url的形式组成。

在配置文件中，Api 的配置采用Http请求方式 url的方式，默认状况下GET能够不写，请求方式统一采用大写形式，动态参数采用: 占位符的形式。

// services/api.js
export default {
  login: 'POST /login',
  logout: '/logout',
  queryUser: '/user/:id'
}

而后须要一个方法在解析上面的Api配置

// services/index.js
import request from '../utils/request'
import api from './api'

const gen = params => {
  let url = params
  let method = 'GET'
  const paramsArr = params.split(' ')
  if (paramsArr.length === 2) {
    method = paramsArr[0]
    url = paramsArr[1]
  }

  return data => {
    return request({
      url,
      data,
      method
    })
  }
}

const apiFunc = {}
for (const key in api) {
  apiFunc[key] = gen(api[key])
}

export default apiFunc

上面代码中的request是封装axios后暴露出来的方法，代码以下：

// utils/request.js
import axios from 'axios'
import store from '../store'
import { apiPrefix } from './config'
import { Message, MessageBox } from 'element-ui'

let cancel
const CancelToken = axios.CancelToken
const service = axios.create({
  baseURL: apiPrefix,
  timeout: 3000,
  cancelToken: new CancelToken(c => cancel = c)
})

service.interceptors.response.use(
  response => {
    const resType = response.config.responseType
    const res = response.data
    // 二进制文件
    if (resType && resType !== 'json') {
      const filename = response.headers['content-disposition'].split('filename=')[1]
      return {
        filename,
        blob: res
      }
    }
    if (res.code !== 200) {
      // 登陆失效
      if (res.code === 401) {
        let timer = null
        // 取消后续请求
        cancel(res.msg)
        // 更新store及localStorage状态
        store.commit('user/RESET_LOGIN_STATE', false)
        MessageBox.confirm('登陆已失效，请从新登陆', '提示', {
          confirmButtonText: '肯定',
          showClose: false,
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
          clearTimeout(timer)
          reload()
        })
        timer = setTimeout(reload, 1000)
      }
      const errMsg = res.msg || '服务器返回错误'
      popupMsg(errMsg)
      return Promise.reject(errMsg)
    }
    return res
  },
  error => {
    // 超时
    if (error.message.includes('timeout')) {
      const errMsg = '网络请求超时， 请稍后重试'
      popupMsg(errMsg)
      cancel(errMsg)
    }
  }
)

function reload() {
  window.location.href = `${window.location.origin}/#/login`
  window.location.reload()
}

function popupMsg(msg, sec = 5000) {
  Message({
    message: msg,
    type: 'error',
    duration: sec
  })
}

export default service

在封装的过程当中处理了网络请求超时、下载表数据时后端直接返回二进制文件的状况、登陆失效后取消后续接口请求。

在开发后台管理系统项目时，基本都会用到Vuex。在实际的开发过程当中一般会按功能进行分module，在xx.vue文件中直接经过mapActions来注入带反作用的方法。

// store/common.js
import service from '../services'

const actions = {
  async login(data) {
    const res = await service.login(data)
    return Promise.resolve(res)
  }
}

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

其实在上面的apiFunc方法中是能够直接调用返回结果，为何在这里还画蛇添足呢？是由于有些时候一个接口的参数须要加工处理，在每一个页面处理明显代码冗余，修改不方便，同时也会出现获取一样的数据可是不一样的页面后端给到的是不一样的接口，这里就能够作到根据参数来明确须要哪一个接口。

在封装的action中，有些时候是不须要返回数据(Promise)，由于彻底能够整个页面的数据状态所有放在state中，接收到数据后直接经过commit一个mutation来修改state，在页面中直接把全部的数经过mapState或者直接this.$store.state.xx来访问。若是想要绑定state中的状态到v-model，能够在computed中定义get和set来实现，例如：

export default {
  computed: {
    dateType: {
      get() {
        return this.$store.state.device.dateType
      },
      set(val) {
        // 一些处理，好比根据日、周、月来动态改变`el-datep-icker`的配置
      }
    }
  }
}

在项目中不建议把页面中的全部状态所有放在vuex中处理，除了一些全局状态和一些组件之间具备联动效应的。由于在当前路由切换到其它路由, vuex中state的数据是没有被重置的，再切回来会发现原有的数据并无变化等问题。并且一旦在定义state时嵌套太多，重置就很麻烦了。

还有一个问题在使用echarts时，根据一些筛选来动态改变图表绘制时，会发现从mapState和getters中并不能获取到最新的数据，还得手动写一长串的this.$store.state.moduleA.moduleB.xxx.state，固然咱们也可使用vuex提供的便捷映射方法const { mapState } = createNamespacedHelper('some/nested/module')，可是有一个问题是一旦同一个页面引用的module不少，就涉及到取多个不一样的别名问题了。

在项目中使用方式以下：

import { mapActions } from 'vuex'
import apiFunc from '../services'

export default {
  methods: {
    ...mapActions('common', [
      'login'
    ]),
    async onLogin() {
      const params = {}
      const res = await apiFunc.login(params)
    }
  }
}

注意在使用async/await时若是外层的错误没有捕捉到，最好加一层try...catch...。

最后：以上是我的的一点点小经验分享，部分参考了antd-admin的思路。