如何重构Vue项目中的Api组织与数据处理流程，使其更高效且易于维护？

本文共计1244个文字，预计阅读时间需要5分钟。

项目中的所有API配置放置在一个文件中，便于查找和修改。API的版本从配置文件（config.js）中读取，使用`apiPrefix + url`的形式组成。在配置文件中，API的配置采用Http请求方式+url的形式，默认为GET。

项目中的所有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... 。