前端项目中的接口统一管理（以vue项目和axios插件为例）

如果觉得中间废话多，请直接跳过，直接看下面代码就好了，不闲扯直接开始！
平时我们项目中调用后端接口的例子：

<script>
// 其他东西咱就省略了
// 引入插件
import axios from "axios";
export default {
   
  data() {
   
    return {
   };
  },
  methods: {
   
	m_getList() {
   
		axios({
   
			url: "", // 接口地址
			data: {
   }, // 请求参数
			// ...其他配置
		}).then(res => {
   
			// 判断接口状态
			if (res.status == 200) {
   
				// 成功
			} else {
   
				// 失败
			}
		}).catch(err => {
   
			// 出错
		});
	}
  },
  created() {
   
  	// 调用函数
  	this.m_getList();
  },
};
</script>

这就是平时项目中，我们请求后端接口的大致代码，项目中的具体细节这里就不多数了。
相信很多人都是这么做的，也不会觉得有什么问题，实际上这没有任何错误，完全能正常跑的一段代码。那么我为什么要把他拿出来呢？
前后端分离的项目中，接口很多，没个接口都有自己不可替代的作用，但是并不是接口越多越好。很多时候，接口完全是可以复用的，这能减少后端同事，很大一部分工作量。并不是没一个页面，都要自己对应的接口，那样代码太个性，项目到后期会变得很臃肿，很难维护。
假如，有这么一个接口，同时要在多个页面进行调用，前端的同事应该怎么去处理？
就拿上面那一段代码来说，也许有的朋友会说，cv大法（复制粘贴）了。没错，可以能解决问题，很完美。但是，项目不是一层不变的，如果有一天，这个接口变了，或者无法满足需求了，需要更换，怎么办。如果一两个地方还好，三五个也还能坚持，十个八个呢？
所以，如果你是一个前端架构着，一定要考虑这个问题，特别是大项目。
对后端接口，进行分类，并统一管理。好处很多，大致列一下：

1. 方便维护，统一管理，一目了然。
2. 更换修改更加容易，。
3. 使用简单，就算给新来的小白，也能分分钟上手。
4. 减少很多重复无用的代码。
5. 规范统一，出错概率低，出错后排出难道低。

就这样，别的就不多列举了。先来个截图大家瞄瞄，效果
这是配置文档

这里是应用，只需要把参数传进去，然后就能返回数据了，如果要换接口，只需要换一下配置里的url，所有用到这个接口的地址就都变了。但是页面上不用做任何调整。

em。。。直接上代码吧。为了方便演示，我就不把配置什么的拆开了，就直接放到一起写了

import axios from "./axiosConfig.js";

// 接口配置
let apiConfig = {
   
  systemManagement: [
    {
    name: "doLogin", method: "post", url: "/xy-base/base/login/doLogin", headers: null, noToken: true}<