前言
上篇文章 axios 二次封装及 API 接口统一管理讲到了 vue 项目中的 axios 请求 API 统一的封装, 但是 API 管理这块一直没有时间总结, 最近项目清闲, 本着以后开发能偷懒就偷懒的情况下, 把项目中的 API 管理这块优化了一下.
目录结构
首先后台 API 请求接口按照功能分文件归档, 统一放在 interface 文件夹下的 apis 中, 如下图:
结构目录
apis 下的文件夹为项目模块及所含功能, 同级目录下的 API.JS 为主要配置文件.
每个文件下的 JS 内容为一个小模块, 如图:
部分文件
用法请参详 axios 二次封装及 API 接口统一管理
主要配置
估计大家看到目录结构的时候已经想到处理方法, 没错, 用到的技术很简单, webpack 自带去中心化配置:
require.context(directory, useSubdirectories = false, regExp = /^\.\//);
directory: 需要创建上下文检索的文件目录路径 u
useSubdirectories: 是否检索子目录
regExp: 匹配文件的正则表达式
导出的功能有 3 个属性: resolve,keys,id.
resolve 是一个函数并返回已解析请求的模块 ID.
keys 是一个函数, 它返回上下文模块可以处理的所有可能请求的数组.
核心代码如下:
引入辅助函数
import { extend } from "../assets/js/tool";
检索 apis 下所有 JS 文件
const APIS = require.context('./apis/', true, /[\w+]+\.JS$/);
获取目录列表
const DIRECTORY =APIS.keys();
根据检索目录导出对象
- /**
- * @description 返回检索后按照目录结构导出的可能对象
- * @param files 目录列表
- * @param context 文件
- * @return object 返回读取完成后 (按照 apis 下目录分别为 power/sport/auth/trade) 带前缀组成的 apis 实例对象
- * @example
- *
- * getContent(DIRECTORY,APIS) ==> { power :{....}, trade:{....}}
- *
- */
- function getContent(files,context) {
- let tree={};
- if(Array.isArray(files) && files.length){
- files.forEach(item=>{
- const fileName=item.replace(/^(\.\/*)+(.*)\.\w+$/, '$2').split('/');
- const parent=fileName.shift();
- if(tree.hasOwnProperty(parent)){
- extend(tree[parent],toTree(fileName,context(item).default))
- }else{
- tree[parent]=toTree(fileName,context(item).default);
- }
- });
- }
- return tree;
- }
根据目录嵌套结构生成相应对象结构
- /**
- * @description 根据 apis 问价下的模块生成对应的层级树
- * @param array 文件路径 ['trade','index']
- * @param tag 赋值对象
- * @return object 返回根据 array 传入的元素生成树形 JSON
- * @example
- *
- * toTree(['trade','analysis','index'],2) ==> { trade:{ analysis: { index :2} } }
- *
- */
- function toTree(array,tag){
- const tree={};
- const arr=array.slice();
- if(arr.length<=1){
- tree[arr[0]]=tag;
- return tree;
- }else{
- tree[arr.shift()]={};
- }
- for(var key in tree){
- if(key && tree.hasOwnProperty(key)){
- tree[key]=toTree(arr,tag);
- }
- }
- return tree;
- }
导出模块
export default getContent(DIRECTORY,APIS);
之后的开发我们只需要在相应的模块目录下新建相关模块即可, 再也不用满页面找接口了.
真香
PS: 欢迎大家关注我的公众号, 一起加油吧~
qrcode_for_gh_20758ef67f94_258.jpg
来源: http://www.jianshu.com/p/d2843e228fa1