❝前沿：自从前端和后端分家之后，前后端接口对接就成为了家常，“谁”也离不开谁，而对接接口的过程就离不开接口文档，比较主流就是Swagger(强大的API文档工具),当然今天它不是主角，顶多也就是个辅助。这篇文章旨在梳理如何在前端项目中更好的去管理跟后端“对接”的接口
❞
聊接口管理，离不开请求库，vue技术栈中请求库谈及最多的，非axios莫属，先让我们重新梳理下axios
1.axios
❝axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，树酱挑了三个觉得特别好用的特征唠唠👇
❞
1.1支持取消请求 (cancelToken)
❝应用场景：当用户重新刷新数据请求的时候，如果你之前发起的请求列表还没有响应，这时候如果你重新发起请求，会出现二次请求的情况，可以通过cancelToken可以取消上一次请求使用文档
❞
那么cancelToken是如何实现的，可以阅读下源码，源码链接 点我感兴趣的同学可以看这篇 axios 之cancelToken原理
2.支持Promise API（axios.all、axios.spread等）
❝应用场景：当我想同时发起多个请求时，axios.all类似于(promise.all）给予我很好的体验方式，解决了并发请求的应用场景
❞
3.拦截器（拦截请求和返回）
❝应用场景：当一个项目中，多个接口需要前端通过header传用户ID、校验token等等时，我们可以统一添加，同理，当接口出现异常的状态码，如401（登录过期）需要重定向到登录页面时，我们需要统一添加处理，这时候拦截器就起到很重要的作用
❞
好了废话不多说，进入今天的主题：如何更好管理 Api 接口。
2.API 管理
2.1 方式一：按模块封装方法
❝通过swagger文档定义的功能模块，来定义不同模块的service，封装接口增删改查等方法
❞
- 按swagger接口文档的模块创建目录
- 编写模块方法（举个用户模块的例子）
❝这里用到了之前封装的kdutil库github链接中的http方法，本质上是对axios进行二次封装，通过不同的api操作来封装不同的请求方法
❞
- 导出所有编写好的模块
当我们将不同模块对应的Swagger接口文档都封装完成之后，可以将各模块导出安装为插件的形式来挂载，模块导出使用的是webpack打包的require.context的方法，引入指定的路径下匹配到的模块引用，如下所示👇
为了让这些模块在Vue中更好地直接使用，我们将导出的模块通过“挂在”Vue.prototype的形式注入到Vue组件中,以此来为Vue对象添加了一个原型属性，而不是一个全局变量。
这里涉及到vue插件的使用，vue 插件一般来用进行如下几种操作
- 添加全局方法或者 property。如：vue-custom-element
- 添加全局资源：指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。（上文使用的是这种操作）
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
Vue.js 的插件需要暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，上图解析出来如下所示
最后在main.js中通过全局方法 Vue.use() 使用插件如向下所示👇
- 如何在项目中调用
因为已经挂载在vue对象的原型上，可以使用this.$api去调模块
❝聊到你可能疑惑就是，你这接口路径不对啊，怎么是相对路径呢？其实是在axios.create的时候就把路径写进去了,如下所示👇
❞
而这个process.env.VUE_APP_URL又是什么玩意？
❝是通过不同环境（开发、测试、生产）定义的不同环境的配置文件（请求api、其他配置等等）具体可以看下树酱的 《基于 Vue-cli 3x的项目部署》的介绍
❞
总结：这种方式优势在于可以很直接的辨别接口增删改查对应的方法，且挂载在vue对象原型中方便调用，一目了然，劣势在于重复代码还是偏多，接下来让我们一起看看下面的这种方式
2.2 方式二. 按api文档编写API
❝上一节讲完的方式一，导出的本质上是方法，那方式二又是怎么样的一种形式，答案是导出配置文件
❞
- 先“上才艺”，先给目录结构
❝通过在配置文件夹定义api，同理以不同模块拆分，下面举user模块这个例子说明
❞
- 按模块编写api
- 导出所有编写好的api配置
❝跟上一节导出模块一样，都是使用require.context，然后再结合Object.defindproperty方法来修改对象的属性，返回一个新的api路径
❞
- 拓展：Object.defineProperty
关于Object.defineProperty，这里也简单讲一下
❝MDN介绍：直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
❞
Object.defineProperty对应的三个数值
- obj 要在其上定义属性的对象。
- prop要定义或修改的属性的名称。
- descriptor将被定义或修改的属性描述符
举个例子如下👇
我们可以看到descriptor中，也就是第三个参数中有个字段enumerable，叫描述对象的enumerable属性，我们称为”可枚举性“
那可枚举性和不可枚举性有什么区别？你看看下面这个例子应该就清楚了，如果是不可枚举则不显示，反之即可，也就是当enumerable为false，只返回给定对象的自身可枚举属性
同样的下面几种方式也是同样的思路（只返回给定对象的自身可枚举属性）
一不小心又聊偏了，回归正题，当我们成功导出API配置文件后，接下来就是如何使用了
- 如何使用
将配置挂载到vue对象原型上
正确调用姿势：
That's all Thank you，如果你有更好的方式请留下你宝贵的意见，非常感谢
❝树酱希望将前端的乐趣带给大家 本文已收录 github.com/littleTreem… 喜欢就star✨
❞
往期文章
