作者:hyangtenghttps://segmentfault.com/a/1190000017925880
在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢?
方法可能不只一种,本文使用axios+async/await进行接口的统一管理。
本文使用vue-cli生成的项目举例。
举例
拿segmentfault的官网简单举个例子,先看一下官网:
看下网站,脑补一下后台给出的文档,如果后台不傻的话给出的文档肯定分模块的,假设后台给出的文档分为了以下几个模块(假设的,不要较真哈):
- 资讯模块 (我的订阅、热门资讯)
- 问答模块
- 专栏模块
- 讲堂模块
- 圈子模块
- 发现模块
- 个人信息模块
- 用户登录注册模块
- ...还有其他很多
一般来说,网站的首页都是复杂的,会用到很多其他页面也会用到api,所以接口统一管理可以做到api的复用:
那么如何做呢?
动手
首先,在src目录下新建一个文件夹,我这里叫apis,后台提供的所有接口都在这里定义:
cd src #切换到src目录mkdir apis #新建apis文件
第二步,按照后台文档划分的模块新建js文件,这里简单举个例子:
- 资讯模块: info.js
- 登录注册模块: member.js
- 个人信息模块 user_info.js
- ....
cd apis #切换到apis目录touch info.js member.js user_info.js #新建js文件
现在的目录大概是这个样子:
src apis info.js member.js user_info.js main.js
3
第三步,需要引入axios做相应的配置。
在apis下新建一个文件夹,叫http.js,在里面做axios相应的配置。
touch http.js //新建http.js文件
配置如下:
配置简要说明一下:
- 引入axios,新建了个axios的实例(axios的实例的axios的功能一样)。
- 请求拦截器响应拦截器不是本文重点,略过。
- 第30行代码及以后是重点,拉出来重点看一下。
第四步,在apis下面的js文件中引入 http.js导出的函数,拿其中一个文件 member.js说明:
第五步,在组件中使用接口。
登陆组件 Login.js使用登录接口:
这样定义接口虽然看起来麻烦点,但有以下几个好处:
- 代码看起来规范,所有的接口都在一个文件夹定义,不用分散的各个组件,维护起来简单,例如后台的一些url变了,改起来也方便。
- 可以做到接口一次定义,到处使用。
例如首页使用了很多api:
用户界面也会用到用户信息api:
就先写到这里了,如有错误,请在评论区指正,下次整理下用户权限相关的内容,包括jwt、token保存和更新、页面权限问题。