前言

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

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

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

快速開始 jsonpath

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

上述語法意思為：

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

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

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

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

使用jsonpath封裝api

封裝axios

封裝axios的過程沒有用到j(luò)sonpath，我們在這里只對方法做了統(tǒng)一。

以封裝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(參數(shù))。

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

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

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

封裝api

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

比如，我們可以把a(bǔ)pi.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+參數(shù)的形式寫成了一個大的對象，就像寫一個文檔一樣，這個格式的數(shù)據(jù)很有利于開發(fā)人員閱讀，我們清楚的知道每個接口來自哪臺主機(jī)、它的參數(shù)是什么，如果你愿意，你完全可以加一個method字段，那樣我們就可以知道它的方法是什么?？傊憧梢酝ㄟ^加字段的方式對這個文檔進(jìn)行維護(hù)，直到這個文檔有你想要的一切信息，并且你自己可以看得懂。

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

而根據(jù)以上結(jié)構(gòu)，我們使用jsonpath很容易的就可以確定一個接口的完整地址，以及它需要的參數(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 //這里就是暴露剛剛用到的方法

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

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

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

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

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

一般我們把請求和接口json分開，假如我們定義request.js和api.js

那么，在request 中引入api.js的getUrl方法，用來解析開發(fā)者傳入的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",
})

可以看到，在使用此方法封裝后，調(diào)用時，只需要傳入一個字符串，一個對象代表參數(shù)即可，且不用隨著method的變化更換參數(shù)格式，因為在封裝axios時，我對他們做了統(tǒng)一處理，無論我們要調(diào)用get還是post，都只需按照一個格式寫請求即可。

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

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

最新評論