前言

jsonpath是一個(gè)可以在復(fù)雜的json數(shù)據(jù)中根據(jù)用戶指定的規(guī)則找到特定數(shù)據(jù)的庫(kù)。

本文利用jsonpath對(duì)接口進(jìn)行封裝，旨在寫(xiě)一個(gè)對(duì)前端友好的、易維護(hù)的、高擴(kuò)展性的、可讀的api json

如果同學(xué)知道xPath，那么可以輕松的掌握jsonpath，如果從沒(méi)聽(tīng)說(shuō)過(guò)這兩個(gè)東西，可以根據(jù)第一小節(jié)快速了解。寫(xiě)法不拘泥于以下代碼，內(nèi)容僅提供思路。

快速開(kāi)始 jsonpath

let obj = {...}
let queryData = jsonpath.query(obj,"$..[?(@.name=='ni')]")

上述語(yǔ)法意思為：

$：從根元素開(kāi)始，也就是`$.`,后面的`.` 意思是遞歸查詢，即查詢到最后一級(jí)子節(jié)點(diǎn)。

[?()]：條件語(yǔ)句，其中`@.`代指當(dāng)前節(jié)點(diǎn)，可以理解為`forof`中的項(xiàng)（item）

如上所示，jsonpath最常用的query方法，有兩個(gè)參數(shù)，第一個(gè)是數(shù)據(jù)源，第二個(gè)是查詢語(yǔ)句。

此外，jsonpath還常用nodes和paths查詢鍵值的路徑、value查詢值等。

使用jsonpath封裝api

封裝axios

封裝axios的過(guò)程沒(méi)有用到j(luò)sonpath，我們?cè)谶@里只對(duì)方法做了統(tǒng)一。

以封裝get為例：

import getUrl from "./apis"  // 這個(gè)就是你自己寫(xiě)的接口json，下面會(huì)講
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)
        })
    })
  },

我們傳入一個(gè)topic(主題)，和一個(gè)data(參數(shù))。

data需要根據(jù)方法的不同做不同的處理，比如post函數(shù)中就應(yīng)該直接axios.post(api(topic), data)，而不是用上述語(yǔ)法。

topic的作用是在api中找出對(duì)應(yīng)的url，后面會(huì)講到，這是用jsonpath做到的。

axios到這里就可以了，相信各位小伙伴也有自己封裝的方法，其實(shí)也都大差不差，你依然可以使用你自己的axios。

封裝api

我們一直希望有一個(gè)易于管理和使用的api封裝的方法，使用jsonpath可以輕松的做到這一點(diǎn)，我們完全可以寫(xiě)一個(gè)只給人類看的api文檔，而不用考慮格式是否容易被讀取。

比如，我們可以把a(bǔ)pi.js寫(xiě)成這樣：

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:{...}
}

由上可見(jiàn)，我們將api以 域名>uri+參數(shù)的形式寫(xiě)成了一個(gè)大的對(duì)象，就像寫(xiě)一個(gè)文檔一樣，這個(gè)格式的數(shù)據(jù)很有利于開(kāi)發(fā)人員閱讀，我們清楚的知道每個(gè)接口來(lái)自哪臺(tái)主機(jī)、它的參數(shù)是什么，如果你愿意，你完全可以加一個(gè)method字段，那樣我們就可以知道它的方法是什么?？傊?，你可以通過(guò)加字段的方式對(duì)這個(gè)文檔進(jìn)行維護(hù)，直到這個(gè)文檔有你想要的一切信息，并且你自己可以看得懂。

如果沒(méi)有jsonpath，我們可能需要對(duì)這個(gè)json進(jìn)行一個(gè)稍微復(fù)雜的遍歷，以找出我們需要的完整接口地址。

而根據(jù)以上結(jié)構(gòu)，我們使用jsonpath很容易的就可以確定一個(gè)接口的完整地址，以及它需要的參數(shù)

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 //這里就是暴露剛剛用到的方法

只需要傳入一個(gè)topic，即可根據(jù)topic找出完整的地址。topic可以根據(jù)接口地址某字段取值或者直接取一個(gè)根接口功能高度相關(guān)的字符，比如，取用戶信息的接口，我們把topic寫(xiě)成getUserInfo，管他接口長(zhǎng)什么樣子，我們調(diào)用只需要：

let userInfo = await request.get('getUserInfo')

根據(jù)上述思路，我們需要做的幾步分別是：

• 根據(jù)自己的喜好封裝axios
• 根據(jù)自己的喜好寫(xiě)一個(gè)接口json
• 根據(jù)自己寫(xiě)的json編寫(xiě)jsonpath查詢

做完這三步后，就可以使用了。

一般我們把請(qǐng)求和接口json分開(kāi)，假如我們定義request.js和api.js

那么，在request 中引入api.js的getUrl方法，用來(lái)解析開(kāi)發(fā)者傳入的topic，并返回一個(gè)axios的promise對(duì)象即可。我們將各種方法放在一個(gè)大對(duì)象中，比如：

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

像這樣，就完成了全部封裝流程

完成后的效果

用起來(lái)的感受就像下面：

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",
})

可以看到，在使用此方法封裝后，調(diào)用時(shí)，只需要傳入一個(gè)字符串，一個(gè)對(duì)象代表參數(shù)即可，且不用隨著method的變化更換參數(shù)格式，因?yàn)樵诜庋baxios時(shí)，我對(duì)他們做了統(tǒng)一處理，無(wú)論我們要調(diào)用get還是post，都只需按照一個(gè)格式寫(xiě)請(qǐng)求即可。

在這種封裝模式下，是很容易拓展的，你可以按照自己的喜好給它加各種攔截器。

以上就是jsonpath做接口封裝使用技巧的詳細(xì)內(nèi)容，更多關(guān)于jsonpath接口封裝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論