怎么使用jsonpath封裝接口

這篇文章主要講解了“怎么使用jsonpath封裝接口”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么使用jsonpath封裝接口”吧！

快速開始 jsonpath

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

上述語法意思為：

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

[?()]：條件語句，其中`@.`代指當前節點，可以理解為`forof`中的項（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需要根據方法的不同做不同的處理，比如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，我們可能需要對這個json進行一個稍微復雜的遍歷，以找出我們需要的完整接口地址。

而根據以上結構，我們使用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可以根據接口地址某字段取值或者直接取一個根接口功能高度相關的字符，比如，取用戶信息的接口，我們把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",
})

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

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

感謝各位的閱讀，以上就是“怎么使用jsonpath封裝接口”的內容了，經過本文的學習后，相信大家對怎么使用jsonpath封裝接口這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！