怎样统一管理vue项目中的大量api和异步操作

前言：当项目比较小时，我们可以直接在文件里单独引用axios来处理与后端api的交互。但是，当项目很大且业务逻辑比较复杂时，再去逐个调用axios来处理后端数据交互就会使代码可读性变差，不利于后期维护；这个时候，就有必要且一定要统一维护api和对应的异步处理操作，以便我们可以进行更复杂的业务逻辑处理。

1、新建文件存放所有的接口api，可以按模块来划分对应的模块

api/api-urls/test.js

const testApis = {
  testApis: {
    apiLogin: 'api/v1/by_user_id',
    api222: ''
  }
}

export default testApis

统一再index.js中导出

import testApis from './api-urls/test'
import detailApis from './api-urls/detail'
import config from '../config' // 项目url前缀及对应开发环境和生产环境切换

const commonDomainArray = [testApis, detailApis]

let urlObj = {}
for (let item of commonDomainArray) {
  item[Object.keys(item)[0]].domain = config.baseUrl
  // 全部整合到一个空对象里面
  Object.assign(urlObj, item)
}
const apiObjs = Object.assign(urlObj)
console.log(apiObjs, '看看apis')
// type:api模块
// pathName: api名称
// serve: 对应部署的模块，默认/
// env:对应调用哪个环境的url地址
function getUrls (type, pathName, serve) {
  const env = process.env.NODE_ENV === 'development' ? 'dev' : 'pro'
  if (!serve) serve = 'default'
  return `${apiObjs[type].domain[env][serve]}/${apiObjs[type][pathName]}`
}
export default getUrls

2、对应环境切换配置文件config/index.js

const ev = {
  dev: 'http://',
  test: 'http://'
}
class Config {
  devPort = '40020' // 端口号
  ev = ev
  baseUrl = {
    dev: {
      default: `${ev.test}${this.devPort}`, // 默认40100， 但是后台发版会导致端口切换，所以还是要自己重新配置
      test: `/test` // 接口api对应的模块
    },
    pro: {
      default: '/',
      test: '/test' // 生产环境部署的对应的模块
    }
  }
}
export default new Config()

3、使用vuex统一管理异步操作

store/modules/test-con.js

import api from '../../api/index'
import axios from 'axios'

const actions = {
  login(context, params) {
    const url = api('testApis', 'apiLogin')
    return axios.post(url, params)
  }
 
}
export default {
  namespaced: true,
  actions
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import testCon from './modules/test-con'
import testDetail from './modules/test-detail'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    testCon,
    testDetail
  }
})
export default store

4、vue组件中使用vuex dispath分发api异步处理

src/components/test.vue

<template>
  <div>
    <h1>我是内容页面1</h1>
    <button @click="handlerClick">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods:{
    // 按钮点击
    async handlerClick() {
     let params = {userId: '57393746696202243'}
     let obj = await this.$store.dispatch('testCon/login', params)
      console.log(obj)
    }
  }
}
</script>

如上，基本就实现了api统一管理。

项目文件路径如下图