请选择 进入手机版 | 继续访问电脑版

齐聚无忧

 找回密码
立即注册

QQ登录

只需一步,快速开始

查看: 189|回复: 0

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

[复制链接]

5

主题

5

帖子

15

积分

等待验证会员

积分
15
发表于 2020-5-14 17:51:45 | 显示全部楼层 |阅读模式
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2Fa4d0efe7j00qab586000ec000hs007km.jpg


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

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

c66f41ca219849a987b74f5b496dd9db.png 1.axios

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

1.1支持取消请求 (cancelToken)

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

?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2Ff42f3c8aj00qab586000sc000hs00bxm.jpg
那么cancelToken是如何实现的,可以阅读下源码,源码链接 点我 感兴趣的同学可以看这篇 axios 之cancelToken原理
1.2支持Promise API(axios.all、axios.spread等)

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

?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F5bff99bej00qab586000gc000hs007sm.jpg
1.3拦截器(拦截请求和返回)

应用场景:当一个项目中,多个接口需要前端通过header传用户ID、校验token等等时,我们可以统一添加,同理,当接口出现异常的状态码,如401(登录过期)需要重定向到登录页面时,我们需要统一添加处理,这时候拦截器就起到很重要的作用

?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2Fa519bbdej00qab586000rc000hs00dsm.jpg
好了废话不多说,进入今天的主题:如何更好管理 Api 接口。

c66f41ca219849a987b74f5b496dd9db.png 2.API 管理


2.1 方式一:按模块封装方法

通过swagger文档定义的功能模块,来定义不同模块的service,封装接口增删改查等方法

按swagger接口文档的模块创建目录
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F54b3d667j00qab586000dc000xm009km.jpg
编写模块方法(举个用户模块的例子)

这里用到了之前封装的kdutil库github链接中的http方法,本质上是对axios进行二次封装,通过不同的api操作来封装不同的请求方法

?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F05280c0ej00qab586000gc000hs007om.jpg
导出所有编写好的模块
当我们将不同模块对应的Swagger接口文档都封装完成之后,可以将各模块导出安装为插件的形式来挂载,模块导出使用的是webpack打包的require.context的方法,引入指定的路径下匹配到的模块引用,如下所示
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F9fe15f26j00qab586000oc000hs00d4m.jpg
为了让这些模块在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 构造器,第二个参数是一个可选的选项对象,上图解析出来如下所示
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2Fffe7405dj00qab586000cc000hs007jm.jpg
最后在main.js中通过全局方法 Vue.use() 使用插件如向下所示
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2Ff8b303e9j00qab586000ec000hs008dm.jpg
如何在项目中调用
因为已经挂载在vue对象的原型上,可以使用this.$api去调模块
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2Fa53a6f4fj00qab586000ec000hs0073m.jpg

聊到你可能疑惑就是,你这接口路径不对啊,怎么是相对路径呢?其实是在axios.create的时候就把路径写进去了,如下所示

?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F39f284e5j00qab586000ec000hs007sm.jpg
而这个process.env.VUE_APP_URL又是什么玩意?

是通过不同环境(开发、测试、生产)定义的不同环境的配置文件(请求api、其他配置等等)具体可以看下树酱的 《基于 Vue-cli 3x的项目部署》的介绍

?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2Fca93aca7j00qab586000ec000zk007sm.jpg
总结:这种方式优势在于可以很直接的辨别接口增删改查对应的方法,且挂载在vue对象原型中方便调用,一目了然,劣势在于重复代码还是偏多,接下来让我们一起看看下面的这种方式
2.2 方式二. 按api文档编写API

上一节讲完的方式一,导出的本质上是方法,那方式二又是怎么样的一种形式,答案是导出配置文件

先“上才艺”,先给目录结构

通过在配置文件夹定义api,同理以不同模块拆分,下面举user模块这个例子说明

?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F26f1ba56j00qab5860008c000p80066m.jpg
按模块编写api
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F3917fd9bj00qab586000ec000hs00apm.jpg
导出所有编写好的api配置

跟上一节导出模块一样,都是使用require.context,然后再结合Object.defindproperty方法来修改对象的属性,返回一个新的api路径

?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F420a1aa2j00qab586000pc000hs00atm.jpg
拓展:Object.defineProperty
关于Object.defineProperty,这里也简单讲一下

MDN介绍:直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

Object.defineProperty对应的三个数值
obj 要在其上定义属性的对象。
prop要定义或修改的属性的名称。
descriptor将被定义或修改的属性描述符
举个例子如下
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F18f82e81j00qab586000gc000hs0084m.jpg
我们可以看到descriptor中,也就是第三个参数中有个字段enumerable,叫描述对象的enumerable属性,我们称为”可枚举性“
那可枚举性和不可枚举性有什么区别?你看看下面这个例子应该就清楚了,如果是不可枚举则不显示,反之即可,也就是当enumerable为false,只返回给定对象的自身可枚举属性
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F3d8e2133j00qab586000gc000hs009am.jpg
同样的下面几种方式也是同样的思路(只返回给定对象的自身可枚举属性)
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F61cc28c8j00qab586000kc000hs008fm.jpg
一不小心又聊偏了,回归正题,当我们成功导出API配置文件后,接下来就是如何使用了
如何使用
将配置挂载到vue对象原型上
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F81b77ea8j00qab586000cc000hs006um.jpg
正确调用姿势:
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0514%2F559bdc39j00qab586000dc000hs0071m.jpg
That's all Thank you,如果你有更好的方式请留下你宝贵的意见,非常感谢

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

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|齐聚无忧 |网站地图

GMT+8, 2021-6-16 05:54 , Processed in 0.055640 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表