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

前沿：自从前端和后端分家以后，先后端接口对接就成为了家常，“谁”也离不开谁，而对接接口的过程就离不开接口文档，比较主流就是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✨

往期文章

• 数据类型转换看这篇就够了
• 前端表单数据那些事
• 微前端那些事
• 前端工程化那些事
• 从0到1开发工具库
• 从0到1开发简单脚手架
• 前端运维部署那些事