vue 项目接口管理 vue3接口

作者：hyangteng
https://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保存和更新、页面权限问题。