《前端那些事》如何更好管理 Api 接口

前沿：自从前端和后端分家之后，前后端接口对接就成为了家常，“谁”也离不开谁，而对接接口的过程就离不开接口文档，比较主流就是Swagger(强大的API文档工具),当然今天它不是主角，顶多也就是个辅助。这篇文章旨在梳理如何在前端项目中更好的去管理跟后端“对接”的接口

聊接口管理，离不开请求库，vue技术栈中请求库谈及最多的，非axios莫属，先让我们重新梳理下axios

1.axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，树酱挑了三个觉得特别好用的特征唠唠

1.1支持取消请求 (cancelToken)

应用场景：当用户重新刷新数据请求的时候，如果你之前发起的请求列表还没有响应，这时候如果你重新发起请求，会出现二次请求的情况，可以通过cancelToken可以取消上一次请求 使用文档

那么cancelToken是如何实现的，可以阅读下源码，源码链接 点我 感兴趣的同学可以看这篇 axios 之cancelToken原理

1.2支持Promise API（axios.all、axios.spread等）

应用场景：当我想同时发起多个请求时，axios.all类似于(promise.all）给予我很好的体验方式，解决了并发请求的应用场景

1.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，如果你有更好的方式请留下你宝贵的意见，非常感谢

作者：树酱
链接：https://juejin.im/post/5eba0684e51d454da077bcc1
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。