利用jsonpath封装前端接口的技巧与实践
本文介绍如何利用jsonpath库对前端接口进行封装，旨在构建易维护、高扩展性的API结构。通过统一封装axios并定义清晰的接口JSON文档，开发者只需传入topic即可获取完整URL及参数，简化了请求调用流程，提升了代码可读性与可维护性。
引言
jsonpath是一款能够依据用户定义规则，在复杂JSON结构中定位特定数据的工具库。
本文通过jsonpath实现接口封装，目标是构建一个对前端友好、易于维护、具备高扩展性及良好可读性的API JSON结构。
若您熟悉xPath，则能轻松上手jsonpath；若未接触过，可通过本节快速了解。代码写法非固定模式，此处仅展示思路。
jsonpath快速入门
let obj = {...}
let queryData = jsonpath.query(obj,"$..[?(@.name=='ni')]")
上述语法的含义如下：
$：表示从根元素开始，即`$.`，随后的`.`代表递归查询，即深入查询至最末级子节点。
[?()]：条件过滤语句，其中`@.`指代当前节点，可类比为`for...of`循环中的当前项（item）。
如示例所示，jsonpath最核心的query方法包含两个参数：第一个为数据源，第二个为查询表达式。
此外，jsonpath还提供nodes和paths用于查询键值路径，以及value用于查询具体值等方法。
利用jsonpath进行API封装
封装axios库
在封装axios的过程中并未直接使用jsonpath，此处仅对方法进行了统一化处理。
以封装GET请求为例：
import getUrl from "./apis" // 这个就是你自己写的接口json，下面会讲
get(topic, data) {
let url
if (topic.indexOf('http') === 0 || topic.indexOf('https') === 0) {
url = topic
} else {
url = getUrl(topic)
}
return new Promise((resolve, reject) => {
axios.get(url, {
params: data
})
.then(response => {
resolve(response.data)
}, err => {
reject(err)
})
})
},
我们需要传入一个topic（主题标识）和一个data（请求参数）。
data需根据HTTP方法的不同进行差异化处理，例如在POST函数中应直接调用axios.post(api(topic), data)，而非沿用上述语法。
topic的作用在于从API配置中检索对应的URL，后续将详细阐述，此步骤由jsonpath实现。
axios部分的封装至此完成，相信各位开发者也有各自的封装方案，大体思路相似，您完全可以保留自己的axios封装方式。
封装API配置
我们始终追求一种易于管理和使用的API封装方案，借助jsonpath可轻松实现。我们可以编写仅面向人类阅读的API文档，无需过度担忧格式是否易于机器读取。
例如，我们可以将api.js配置如下：
const apis = {
mainDomain: {
baseUrl: "https://yourmainDomain.com",
uri: {
introduction: {
topic: "introduction",
uri: "/introduction",
pramas: {
appCode: String,
type: Number
}
},
someData: {
topic: "someData",
uri: "/somepath/somewhere/someData",
},
}
},
other:{...}
}
从上述结构可见，我们将API以“域名>uri+参数”的形式组织为一个大对象，类似于编写文档。这种格式的数据极利于开发人员阅读，能清晰知晓每个接口的主机来源及参数定义。如有需要，可添加method字段以明确请求方法。总之，可通过增加字段维护文档，直至包含所需全部信息且易于理解。
若不使用jsonpath，我们可能需要编写较复杂的遍历逻辑来提取完整的接口地址。
而基于上述结构，利用jsonpath可轻松确定接口的完整地址及其所需参数。
const getUrl = (topic) => {
let path = jsonpath.paths(apis, `$..[?(@.topic=='${topic}')]`)
let { baseUrl } = jsonpath.query(apis, `$.${path[0][1]}`)[0]
let { uri } = jsonpath.query(apis, `$..[?(@.topic=='${topic}')]`)[0]
return baseUrl + uri //返回完整api地址
}
export default getUrl //这里就是暴露刚刚用到的方法
只需传入一个topic，即可根据该标识检索出完整地址。topic可取自接口地址的某字段，或直接取与根接口功能高度相关的字符。例如，对于用户信息接口，我们将topic设为getUserInfo，无论接口实际形态如何，调用时仅需：
let userInfo = await request.get('getUserInfo')
基于上述思路，我们需要执行以下步骤：
- 根据个人偏好封装axios
- 根据个人偏好编写接口JSON配置
- 根据编写的JSON配置编写jsonpath查询语句
完成上述三步后，即可投入使用。
通常我们将请求逻辑与接口JSON分离，假设定义request.js和api.js两个文件。
在request中引入api.js的getUrl方法，用于解析开发者传入的topic，并返回一个axios的Promise对象。我们将各类方法封装在大对象中，例如：
import axios from "axios"
import api from "./apis"
import qs from "qs"
const request = {
//...post...get......
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
export default request
如此，便完成了全部的封装流程。
最终效果展示
实际使用感受如下：
import request from '@/utils/request';
let bugsData = await request.get('getBugsData', {
beginTimeS: time.begin,
endTimeS: time.end
})
let bugsData = await request.post('setUserInfo', {
nickName: "德莱厄斯",
})
let bugsData = await request.put('someApi', {
someKey: "someValue",
})可见，采用此方法封装后，调用时仅需传入一个字符串和一个代表参数的对象。由于在封装axios时已对参数格式做了统一处理，无论调用GET还是POST，均只需遵循单一格式编写请求即可。
在此封装模式下，扩展性极强，您可根据个人喜好添加各类拦截器。
以上即为利用jsonpath进行接口封装的技巧详解，更多jsonpath接口封装相关内容请关注本站其他文章！
macOS卸载Node.js指南：区分Homebrew与pkg安装包的处理方式
2026-11-05 11:28:12
JS逆向入门：浏览器Console调试与Node.js环境搭建指南
2026-11-05 10:57:15
Node.js 大版本升级需要注意哪些破坏性变更
2026-11-03 20:35:44
Node.js官网LTS版与Current版有什么区别
2026-11-03 19:33:49
Windows彻底卸载Node.js：清理AppData残留与PATH环境变量
2026-11-03 19:15:35