Vue.js 项目接口管理

Posted Vue中文社区

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 项目接口管理相关的知识，希望对你有一定的参考价值。

在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？

方法可能不只一种，本文使用axios+async/await进行接口的统一管理。

本文使用vue-cli生成的项目举例。

举例

拿segmentfault的官网简单举个例子，先看一下官网：

看下网站，脑补一下后台给出的文档，如果后台不傻的话给出的文档肯定分模块的，假设后台给出的文档分为了以下几个模块（假设的，不要较真哈）：

  • 资讯模块 (我的订阅、热门资讯)

  • 问答模块

  • 专栏模块

  • 讲堂模块

  • 圈子模块

  • 发现模块

  • 个人信息模块

  • 用户登录注册模块

  • ...还有其他很多

一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到api，所以接口统一管理可以做到api的复用：

那么如何做呢？

动手

1

首先，在src目录下新建一个文件夹，我这里叫apis，后台提供的所有接口都在这里定义：

 
   
   
 
    
  
    
    
  
  1. cd src  #切换到src目录
    2. 
  
    
    
  
  2. mkdir apis  #新建apis文件
    3.
2

第二步，按照后台文档划分的模块新建js文件,这里简单举个例子：

  • 资讯模块： info.js

  • 登录注册模块: member.js

  • 个人信息模块 user_info.js

  • ....

 
   
   
 
    
  
    
    
  
  1. cd apis #切换到apis目录
    2. 
  
    
    
  
  2. touch info.js member.js user_info.js #新建js文件
    3.

现在的目录大概是这个样子：

 
   
   
 
    
  
    
    
  
  1. src
    2. 
  
    
    
  
  2.     apis
    3. 
  
    
    
  
  3.         info.js
    4. 
  
    
    
  
  4.         member.js
    5. 
  
    
    
  
  5.         user_info.js
    6. 
  
    
    
  
  6.     main.js
    7.
3

第三步，需要引入axios做相应的配置。

在apis下新建一个文件夹，叫http.js，在里面做axios相应的配置。

 
   
   
 
    
  
    
    
  
  1. touch http.js //新建http.js文件
    2.

配置如下：

 
   
   
 
    
  
    
    
  
  1. import axios from 'axios'
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. //创建axios的一个实例 
    4. 
  
    
    
  
  4. var instance = axios.create({
    5. 
  
    
    
  
  5.     baseURL:xxx,
    6. 
  
    
    
  
  6.     timeout: 6000
    7. 
  
    
    
  
  7. })
    8. 
  
    
    
  

    9. 
  
    
    
  

    10. 
  
    
    
  
  10. //------------------- 一、请求拦截器 忽略
    11. 
  
    
    
  
  11. instance.interceptors.request.use(function (config) {
    12. 
  
    
    
  

    13. 
  
    
    
  
  13.     return config;
    14. 
  
    
    
  
  14. }, function (error) {
    15. 
  
    
    
  
  15.     // 对请求错误做些什么
    16. 
  
    
    
  

    17. 
  
    
    
  
  17.     return Promise.reject(error);
    18. 
  
    
    
  
  18. });
    19. 
  
    
    
  

    20. 
  
    
    
  
  20. //----------------- 二、响应拦截器 忽略
    21. 
  
    
    
  
  21. instance.interceptors.response.use(function (response) {
    22. 
  
    
    
  

    23. 
  
    
    
  
  23.     return response.data;
    24. 
  
    
    
  
  24. }, function (error) {
    25. 
  
    
    
  
  25.     // 对响应错误做点什么
    26. 
  
    
    
  
  26.     return Promise.reject(error);
    27. 
  
    
    
  
  27. });
    28. 
  
    
    
  

    29. 
  
    
    
  

    30. 
  
    
    
  
  30. export default function (method, url, data = null) {
    31. 
  
    
    
  
  31.     method = method.toLowerCase();
    32. 
  
    
    
  
  32.     if (method == 'post') {
    33. 
  
    
    
  
  33.         return instance.post(url, data)
    34. 
  
    
    
  
  34.     } else if (method == 'get') {
    35. 
  
    
    
  
  35.         return instance.get(url, { params: data })
    36. 
  
    
    
  
  36.     } else if (method == 'delete') {
    37. 
  
    
    
  
  37.         return instance.delete(url, { params: data })
    38. 
  
    
    
  
  38.     }else if(method == 'put'){
    39. 
  
    
    
  
  39.         return instance.put(url,data)
    40. 
  
    
    
  
  40.     }else{
    41. 
  
    
    
  
  41.         console.error('未知的method'+method)
    42. 
  
    
    
  
  42.         return false
    43. 
  
    
    
  
  43.     }
    44. 
  
    
    
  
  44. }
    45.

配置简要说明一下：

  • 引入axios，新建了个axios的实例（axios的实例的axios的功能一样）。

  • 请求拦截器响应拦截器不是本文重点，略过。

  • 第30行代码及以后是重点，拉出来重点看一下。

 
   
   
 
    
  
    
    
  
  1. /**
    2. 
  
    
    
  
  2.  * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
    3. 
  
    
    
  
  3.  * 函数的参数及返回值如下：
    4. 
  
    
    
  
  4.  * @param {String} method  请求的方法：get、post、delete、put
    5. 
  
    
    
  
  5.  * @param {String} url     请求的url:
    6. 
  
    
    
  
  6.  * @param {Object} data    请求的参数
    7. 
  
    
    
  
  7.  * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
    8. 
  
    
    
  
  8.  */
    9. 
  
    
    
  
  9. export default function (method, url, data = null) {
    10. 
  
    
    
  
  10.     method = method.toLowerCase();
    11. 
  
    
    
  
  11.     if (method == 'post') {
    12. 
  
    
    
  
  12.         return instance.post(url, data)
    13. 
  
    
    
  
  13.     } else if (method == 'get') {
    14. 
  
    
    
  
  14.         return instance.get(url, { params: data })
    15. 
  
    
    
  
  15.     } else if (method == 'delete') {
    16. 
  
    
    
  
  16.         return instance.delete(url, { params: data })
    17. 
  
    
    
  
  17.     }else if(method == 'put'){
    18. 
  
    
    
  
  18.         return instance.put(url,data)
    19. 
  
    
    
  
  19.     }else{
    20. 
  
    
    
  
  20.         console.error('未知的method'+method)
    21. 
  
    
    
  
  21.         return false
    22. 
  
    
    
  
  22.     }
    23. 
  
    
    
  
  23. }
    24.
4

第四步，在apis下面的js文件中引入 http.js导出的函数，拿其中一个文件 member.js说明：

 
   
   
 
    
  
    
    
  
  1. //member.js 用于定义用户的登录、注册、注销等
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. import req from './http.js'
    4. 
  
    
    
  

    5. 
  
    
    
  
  5. //定义接口  
    6. 
  
    
    
  

    7. 
  
    
    
  
  7. //在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
    8. 
  
    
    
  
  8. export const LOGIN =params=>req('post','/operator/login',params)
    9. 
  
    
    
  
  9. //这里使用了箭头函数，转换一下写法：
    10. 
  
    
    
  
  10. //export const LOGIN=function(req){
    11. 
  
    
    
  
  11. //    return req('post','/operator/login',params)
    12. 
  
    
    
  
  12. //}
    13. 
  
    
    
  

    14. 
  
    
    
  
  14. //定义注册接口
    15. 
  
    
    
  
  15. export const REG =params=>req('post','/operator/reg',params)
    16. 
  
    
    
  
  16. //定义注销接口
    17. 
  
    
    
  
  17. export const LOGOUT =params=>req('post','/operator/logout',params)
    18.
5.

第五步，在组件中使用接口。

登陆组件 Login.js使用登录接口：

 
   
   
 
    
  
    
    
  
  1. //Login.vue
    2. 
  
    
    
  
  2. <template>
    3. 
  
    
    
  
  3.     <div>
    4. 
  
    
    
  
  4.         <input type='text' v-model='user.userId'>
    5. 
  
    
    
  
  5.         <input type='text' v-model='user.pass'>
    6. 
  
    
    
  
  6.     </div>
    7. 
  
    
    
  
  7. </template>
    8. 
  
    
    
  
  8. <script>
    9. 
  
    
    
  
  9.     //1. 引入登录的接口定义
    10. 
  
    
    
  
  10.     import {LOGIN} from '../../apis/user.js'
    11. 
  
    
    
  
  11.     export default{
    12. 
  
    
    
  
  12.         data(){
    13. 
  
    
    
  
  13.             return {
    14. 
  
    
    
  
  14.                 user:{
    15. 
  
    
    
  
  15.                     userId:'',
    16. 
  
    
    
  
  16.                     pass:''
    17. 
  
    
    
  
  17.                 }
    18. 
  
    
    
  
  18.             }
    19. 
  
    
    
  
  19.         },
    20. 
  
    
    
  
  20.         methods{
    21. 
  
    
    
  
  21.         //2. 定义登录的逻辑
    22. 
  
    
    
  
  22.         async login(){
    23. 
  
    
    
  
  23.             //2.1 awiat LOGIN(this.user) 
    24. 
  
    
    
  
  24.               //等待LOGIN(this.user)执行完,
    25. 
  
    
    
  
  25.               //把返回值给user_info
    26. 
  
    
    
  

    27. 
  
    
    
  
  27.             let user_info=await LOGIN(this.user)
    28. 
  
    
    
  

    29. 
  
    
    
  
  29.             //2.2假设登录成功,返回的数据应该是 
    30. 
  
    
    
  
  30.                 //user_info={code:200,msg:'success',data:{token:'xxxxx'}}
    31. 
  
    
    
  
  31.                 //然后根据返回的数据做相应的处理，比如储存token
    32. 
  
    
    
  

    33. 
  
    
    
  
  33.         } 
    34. 
  
    
    
  
  34.         },
    35. 
  
    
    
  
  35.         mounted(){
    36. 
  
    
    
  
  36.             //3. 执行登录
    37. 
  
    
    
  
  37.             this.login()
    38. 
  
    
    
  
  38.         }
    39. 
  
    
    
  
  39.     }
    40. 
  
    
    
  
  40. </script>
    41.
6

这样定义接口虽然看起来麻烦点，但有以下几个好处：

  • 代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，维护起来简单，例如后台的一些url变了，改起来也方便。

  • 可以做到接口一次定义，到处使用。

例如首页使用了很多api：

 
   
   
 
    
  
    
    
  
  1. //index.js  首页的js文件
    2. 
  
    
    
  
  2. import {GET_USER_INFO} from 'apis/user_info.js'  //用户信息
    3. 
  
    
    
  
  3. import {GET_CURRENT_INFO,GET_HOT_INFO} from 'apis/info.js' //热门资讯 最新资讯
    4. 
  
    
    
  
  4. import {GET_HOT_LECTRUE} from'apis/lectrue.js' //讲座推荐
    5.

用户界面也会用到用户信息api：

 
   
   
 
    
  
    
    
  
  1. //user_info.js用户信息页面
    2. 
  
    
    
  
  2. import {GET_USER_INFO} from 'apis/user_info.js'  //用户信息
    3.

就先写到这里了，如有错误，请在评论区指正，下次整理下用户权限相关的内容，包括jwt、token保存和更新、页面权限问题。

https://segmentfault.com/a/1190000017925880


往期



福利:扫描下方二维码回复视频即可得高级vue视频一套


以上是关于Vue.js 项目接口管理的主要内容，如果未能解决你的问题，请参考以下文章

使用带有渲染功能的 Vue.js 3 片段

腾讯架构师带我写代码 —— vue真实企业实战分享

腾讯架构师带我写代码 —— vue真实企业实战分享

vue.js中api接口的统一管理（参考）

Vue.js 源码学习之Flag篇

第1129期对vue.js单文件（.vue）进行单元测试