如果大家覺得有用，更多的模組請點選檢視
-
系列文章
掃碼訪問
下面介紹一下vue-viewplus 一個簡化Vue應用開發的工具庫中的util-http.js 針對axios進行了二次封裝的ajax模組。
模組對axios進行了一次封裝，目的是為了減少開發人員的工作量，簡化和伺服器端、客戶端（JSBridge 代理請求）的互動，配合login-state-check.js模組進行身份認證許可權控制。
為什麼我們需要再封裝axios，因為我們在想要做這個外掛的時候已經經歷了幾個專案，不管是否是前後臺分離或者是否服務端是RESTFull型別服務，在傳送請求和處理請求的時候，對於一個企業級（或者簡單應用）都會存在或多或少的樣板程式碼，那我們在實踐的過程中就一步一步把這些樣本程式碼抽離了業務，使得開發人員更容易關注於業務本身，這樣就提高了開發效率，避免了一些不必要的錯誤，而這個模組提供了一下幾點抽象：
- 幫我們處理了大部分業務級錯誤。何為業務級錯誤？因為很多的後端返回的資料都非嚴格意義上的RESTFull格式的結果，這裡我們關注的是很多服務都不是以http規範上的狀態碼非200來標識請求出錯，而是會有一些自定義的錯誤碼，這就提供給了我們進行統一業務錯誤處理的衝動，當然要在此基礎上新增對規範形式的統一錯誤判斷也就容易了
- 幫助我們進行特殊的請求代理，因為加了一層，我們就可以做很多事情，這裡我們就可以讓Ajax程式設計非Ajax，即在移動應用開發的時候，由於跨域和WebView Ajax傳送請求很難對資料進行SSL加密證照配置兩個需求，我們可以讓請求傳送到客戶端，然後由客戶端代理前端完成請求的傳送，這就涉及到前端和客戶端的互動，也就是JSBridge互動，我們已經有了一套android-viewplus 一個安卓混合客戶端開發庫，來解決JSBridge客戶端互動流程，那麼我們這裡就能很簡單的在中間加的這一層很簡單的完成上面的兩個需求
- 關於配合
login-state-check.js模組進行身份認證許可權控制，可以檢視當前模組的accessRules.sessionTimeOut和accessRules.onSessionTimeOut，因為會話的真正控制一般是在後臺，那麼如果後臺的session或token失效之後，服務端肯定會返回響應的錯誤，那麼當前模組通過上面兩個accessRules的配置，得以使應用攔截到這一時機，並在通知應用前，清理了外掛login-state-check.js模組維護的登入狀態：loginStateCheckInstall.modifyLoginState(false)
下面的介面可能會涉及到服務端返回資料的描述，這裡我們先假定一下基本的服務端響應資料格式。
由於要服務端資料需要描述業務是否成功和業務失敗的原因，因此我們來約定一下服務端返回資料的結構。
在任何情況下，伺服器返回的body中的JSON資料必須是一個物件，用code返回業務狀態，用data返回客戶端要請求的實際資料，用message返回業務失敗後的提示資訊；其中code值為1時表示業務成功，code值為其它時表示業務失敗；其中data可以是{}|[]。需要特別注意的是有些服務端會把httpCode同時作為業務狀態碼，這也是完全正確的，封裝原理與本文相同。
服務端返回的資料的結構應該是：
{
"code": [1| "其他字串，如：session_timeout_err"],
"data": [{}|[]],
"message": "錯誤提示資訊|正確提示資訊"
}
複製程式碼示例
<template>
<div id="UtilHttp">
<group title="ajaxMixin - GET請求" label-width="15em">
<box gap="10px 10px">
<x-button @click.native="doGet" :disabled="doGetBtnState">使用$vp#ajaxMixin傳送GET請求</x-button>
</box>
</group>
<group title="ajaxMixin - POST請求" label-width="15em">
<box gap="10px 10px">
<x-button @click.native="doPost" :disabled="doPostBtnState">使用$vp#ajaxMixin傳送POST請求</x-button>
</box>
</group>
<group title="ajaxAll請求" label-width="15em">
<box gap="10px 10px">
<p class="hint-msg">針對這個方法外掛沒有幫應用進行業務成功與否的判斷，但是應用可以呼叫`$vp#$vp.onParseServerResp(response)`來呼叫統一業務級別錯誤介面來根據自己的需求對判斷進行後續處理</p>
<x-button @click.native.stop="doAjaxAll" :disabled="ajaxAllBtnState">使用$vp#ajaxAll傳送請求</x-button>
</box>
</group>
<group title="ajaxMixin - NATIVE請求" label-width="15em">
<box gap="10px 10px">
<span class="hint-msg-warn">該功能需要客戶端JsBridge能力，如沒有修改，請別點了 ；）</span><br/>
<x-button @click.native="doHttpNative" :disabled="doHttpNativeBtnState">原生請求測試</x-button>
</box>
</group>
</div>
</template>
<script type="text/ecmascript-6">
import demoMixin from './demo-mixin'
import _ from 'lodash'
export default {
mixins: [demoMixin],
data() {
return {
ajaxAllBtnState: false,
doGetBtnState: false,
doPostBtnState: false,
doCORSBtnState: false,
doHttpNativeBtnState: false
}
},
methods: {
doGet() {
this.doGetBtnState = true
this.$vp
.ajaxMixin('TIMESTAMP', {
mode: 'GET'
})
.then(data => {
this.doGetBtnState = false
this.$vp.uiDialog(
data,
{
title: '請求成功，響應結果',
showCode: true
}
)
})
.catch(resp => {
console.log(resp)
this.doGetBtnState = false
})
},
doPost() {
this.doPostBtnState = true
this.$vp
.ajaxMixin('LOGIN')
.then(data => {
this.doPostBtnState = false
this.$vp.uiDialog(
data,
{
title: '請求成功，響應結果',
showCode: true
}
)
})
.catch(resp => {
this.doPostBtnState = false
})
},
doAjaxAll() {
this.ajaxAllBtnState = true
this.$vp
.ajaxAll([
{
url: 'ALL1',
mode: 'GET'
}, {
url: 'ALL2',
mode: 'GET'
}
])
.then(resArr => {
this.ajaxAllBtnState = false
// 這裡需要應用手動把axios的data屬性解析掉
const res = _.map(resArr, (item) => {
return item.data
})
this.$vp.uiDialog(res, {
title: '請求成功，響應結果',
showCode: true
})
})
},
doHttpNative() {
this.doHttpNativeBtnState = true
this.$vp
.ajaxMixin('TIMESTAMP', { mode: 'NATIVE' })
.then(res => {
this.$vp.uiDialog(res, {
title: '請求成功，響應結果',
showCode: true
})
this.doHttpNativeBtnState = false
})
.catch((err) => {
this.$vp.uiDialog(err, {
title: '請求失敗，響應結果',
showCode: true
})
this.doHttpNativeBtnState = false
})
}
}
</script>
複製程式碼示例所需配置：
Vue.use(ViewPlus, {
//...
utilHttp: {
baseURL: 'http://localhost:7000',
// 這裡的data key，請檢視mock server的jsonp輸出配置
dataKey: 'data',
statusCodeKey: 'code',
statusCode: '1',
msgKey: 'msg',
needBase64DecodeMsg: false,
loading(loadingHintText) {
this.uiLoading(loadingHintText)
},
hideLoading() {
this.uiHideLoading()
},
errDialog(content = '錯誤訊息未定義') {
this.dialog(content)
return this
},
accessRules: {
sessionTimeOut: ['role.invalid_user', 'validation.user.force.logout.exception'],
onSessionTimeOut(response) {
this.dialog(`onSessionTimeOut回撥：${response.msg}`, {
title: '回撥通知'
})
},
unauthorized: ['core_error_unauthorized'],
onUnauthorized(response) {
this.dialog(`onUnauthorized回撥應用處理：${response.msg}`, {
title: '回撥通知'
})
}
}
}
})
複製程式碼配置
關於axios的配置，可以參考axios#config.timeout，一般標識[axios#config.timeout](https://github.com/axios/axios#request-config)都屬於axios的配置
baseURL *
/**
* 【可選】`baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。它可以通過設定一個 `baseURL` 便於為 axios 例項的方法傳遞相對 URL
* <p>
* [axios#config.timeout](https://github.com/axios/axios#request-config)
*/
baseURL = {String}
複製程式碼timeout
/**
* 【可選】`timeout` 指定請求超時的毫秒數(0 表示無超時時間), 如果請求話費了超過 `timeout` 的時間，請求將被中斷
* <p>
* [axios#config.timeout](https://github.com/axios/axios#request-config)
*/
timeout = 6000
複製程式碼params
/**
* 【可選】`params` 是即將與請求一起傳送的 URL 引數必須是一個無格式物件(plain object)或 URLSearchParams 物件
* <p>
* [axios#config.timeout](https://github.com/axios/axios#request-config)
*/
params = null
複製程式碼headers
/**
* 【可選】`headers` 是即將被髮送的自定義請求頭
* <p>
* [axios#config.timeout](https://github.com/axios/axios#request-config)
*/
headers = null
複製程式碼withCredentials
/**
* 表示跨域請求時是否需要使用憑證
* <p>
* [axios#config.timeout](https://github.com/axios/axios#request-config)
*/
withCredentials = false
複製程式碼mode
/**
* 【可選】預設請求的method【'GET'| 'POST'| 'NATIVE'】
* <p>
* 提示：如果整個應用的大部分交易都需要使用**客戶端代理轉發請求（涉及到前端和客戶端的互動，也就是JSBridge互動，我們已經有了一套android-viewplus 一個安卓混合客戶端開發庫，來解決JSBridge客戶端互動流程）**，
* 那麼這裡需要配置為'NATIVE'，這樣基本上所有交易（呼叫$vp#ajaxMixin）都會走代理，如果某一個交易需要使用**ajax**，則在呼叫的時候手動設定`$vp#ajaxMixin.mode`引數進行覆蓋
*/
mode = 'POST'
複製程式碼onSendAjaxParamsHandle
/**
* 【可選】`$vp#onSendAjaxParamsHandle(url, params, mode)=>{}`
* 配置發請求之前的引數處理回撥函式，在每一次傳送請求前呼叫，返回的物件作為傳送請求的引數
* <p>
* 如果配置該函式，則表示不需要外掛做處理(目前外掛只對POST方式的請求做`qs.stringify(params)`處理)
*/
onSendAjaxParamsHandle = null
複製程式碼statusCodeKey [*]
/**
* 服務端返回的資料中標識當前此次請求是否是業務層面的成功的**業務狀態**的key
* 如果配置了`UtilHttp#onParseServerResp`則無需配置該選項
* <p>
* 如服務端返回：{code:[1|0]}，用code返回業務狀態，這裡就配置為`code`
*/
statusCodeKey = 'code'
複製程式碼statusCode [*]
/**
* 服務端返回的資料中標識當前此次請求是否是業務層面的成功的**業務狀態**的值
* 如果配置了`httpUtil#onParseServerResp`則無需配置該選項
* <p>
* 如服務端返回：{code:[1|0]}，用code返回業務狀態，其中1標識為**成功**，這裡就配置為`1`
*/
statusCode = '1'
複製程式碼onSendAjaxRespHandle
/**
* 【可選】`$vp#onSendAjaxRespHandle(response)=>{}`伺服器返回的資料處理，如果配置該函式，則會第一時間將後臺返回資料先交給該函式進行預處理
* <p>
* 返回的**預處理響應結果物件**之後，才會再進行統一業務判斷等後續處理邏輯
*/
onSendAjaxRespHandle = null
複製程式碼onParseServerResp [*]
/**
* 【可選】`$vp#onParseServerResp(response)=>[true|false]`
* 應用手動進行業務邏輯成功與否的判斷回撥函式，如果配置了該回撥函式，則無需配置`UtilHttp#statusCode && UtilHttp#statusCodeKey`
* <p>
* return true標識請求成功|false標識請求出錯，外掛將會查詢返回響應資料中該`UtilHttp#[msgKey|errMsgKey]`對應的訊息，呼叫`UtilHttp#errDialog`反饋給使用者
*/
onParseServerResp = null
複製程式碼onSendAjaxRespErr
/**
* 【可選】`$vp#onSendAjaxRespErr(response)`
* 當發生業務級錯誤時候被呼叫,如果該函式返回true則表示應用已經處理了本次請求的錯誤，否則交給外掛進行處理，外掛就會查詢返回響應資料中該`UtilHttp#[msgKey|errMsgKey]`對應的訊息，呼叫`UtilHttp#errDialog`反饋給使用者
*/
onSendAjaxRespErr = null
複製程式碼errCodeKey
/**
* 【可選】服務端返回的資料中錯誤碼的key（可選，看對應的後端是否存在，有些應用直接通過`UtilHttp#statusCode`來替代）
* <p>
* 如服務端返回：{code:[1|0],err_code:'auth_err'}，用err_code返回錯誤碼，這裡就配置為`err_code`,沒有的話外掛會讀取`code`作為錯誤碼，**然後根據錯誤碼做[會話超時|許可權不足|無效彈出錯誤dialog]的判斷**
*/
errCodeKey = ''
複製程式碼noNeedDialogHandlerErr
/**
* 【可選】當發生業務級錯誤時候不需要外掛彈出錯誤訊息的規則集合（使用陣列格式），配置響應後臺返回的`UtilHttp#[errCodeKey|statusCode]`對應錯誤碼
* <p>
* 如服務端返回：{code:[1|0],err_code:'auth_err'}，`auth_err`就可以作為這裡的配置項：['auth_err']，當外掛檢測到當前錯誤碼在這個集合中，就不會彈出錯誤訊息
*/
noNeedDialogHandlerErr = null
複製程式碼accessRules
/**
* 訪問控制規則
*/
accessRules: {
複製程式碼accessRules.sessionTimeOut
/**
* 【可選】會話超時規則集合（使用陣列格式），當發生業務級錯誤時候，針對**會話超時**時候後臺返回的`UtilHttp#[errCodeKey|statusCode]`對應錯誤碼與之匹配
* <p>
* 如服務端返回：{code:[1|0],err_code:'session_time_out'}，`session_time_out`就可以作為這裡的配置項：['session_time_out']，用於標識這個是一個會話過期的錯誤，當外掛檢測到當前錯誤碼在這個集合中，
* 就會呼叫`UtilHttp#onSessionTimeOut`回撥函式，通知應用，以便應用進行重新登入等提示，因為檢測會話是否超時，一般是在請求到後臺需要進行身份認證的介面才會觸發；其次，外掛會呼叫`loginStateCheck.modifyLoginState`
* 清除外掛主動維護的登入狀態和持久化登入資訊，詳見`login-state-check.js`模組對應介面
*/
sessionTimeOut = null
複製程式碼accessRules.onSessionTimeOut
/**
* 【可選】$vp#onSessionTimeOut(response)
* 當發生業務級錯誤時候，針對**會話超時**時候後臺返回的`UtilHttp#[errCodeKey|statusCode]`對應錯誤碼判斷為會話超時的時候被回撥
*/
onSessionTimeOut = null
複製程式碼accessRules.unauthorized
/**
* 【可選】許可權不足規則集合（使用陣列格式），當發生業務級錯誤時候，針對**會話超時**時候後臺返回的`UtilHttp#[errCodeKey|statusCode]`對應錯誤碼與之匹配
* <p>
* 如服務端返回：{code:[1|0],err_code:'auth_fail'}，`auth_fail`就可以作為這裡的配置項：['auth_fail']，用於標識這個是一個許可權不足的錯誤，當外掛檢測到當前錯誤碼在這個集合中，
* 就會呼叫`UtilHttp#onUnauthorized`回撥函式，通知應用，以便應用進行提示或彈出頁面等操作
*/
unauthorized = null
複製程式碼accessRules.onUnauthorized
/**
* 【可選】$vp#onUnauthorized(response)
* 當發生業務級錯誤時候，當發生業務級錯誤時候，針對**會話超時**時候後臺返回的`UtilHttp#[errCodeKey|statusCode]`對應錯誤碼與之匹配
*/
onUnauthorized = null
複製程式碼dataKey
/**
* 【可選】服務端返回的json物件儲存了【業務狀態碼、錯誤訊息、實際需要返回給前端的資料的】物件的key，有些後臺介面有，有些沒有
* {String}
* <p>
* 如服務端返回：{code:[1|0], rdata:{}}，用rdata返回實際的交易資料，這裡就配置為`rdata`,否則不用配置
* <p>
* 如果存在該配置，那麼在請求成功之後，返回的`Promise#resolve`中獲得的將是[伺服器響應結果.dataKey]的值，而`Promise#reject`中獲得的將會根據`UtilHttp#errInfoOutDataObj`配置的值來進行區別篩選
*/
dataKey = 'data'
複製程式碼msgKey
/**
* 服務端返回的資料中錯誤訊息的key，在判斷為業務級別錯誤的時候，會查詢返回響應資料中該key對應的訊息，呼叫`UtilHttp#errDialog`反饋給使用者
* {String}
* <p>
* 如服務端返回：{code:[1|0], msg:'您無權訪問該介面'}，用msg返回實際的交易資料中錯誤訊息，這裡就配置為`msg`
*/
msgKey = 'msg'
複製程式碼errMsgKey
/**
* 【可選】服務端返回的資料中錯誤訊息的key（可選，看對應的後端是否存在，有些應用直接通過`UtilHttp#msgKey`來替代）
* <p>
* 如服務端返回：{code:[1|0], errmsg:'您無權訪問該介面'}，用errmsg返回實際的交易資料中錯誤訊息，這裡就配置為`errmsg`,否則不用配置，**外掛會試圖查詢`UtilHttp#msgKey`**
*/
errMsgKey = 'errmsg'
複製程式碼errDialog [*]
/**
* `UtilHttp#errDialog(errMsg)`
* 當發[請求出錯|生業務級]錯誤時候被呼叫，這樣就方便應用適配符合自己的UI元件
*/
errDialog = window.alert
複製程式碼errInfoOutDataObj
/**
* 【可選】服務端返回的資料中錯誤訊息是否不在`UtilHttp#dataKey`對應的物件中
* <p>
* 如服務端返回：{code:[1|0], rdata:{msg:'您無權訪問該介面'}}，用rdata返回實際的交易資料，msg標識錯誤提示訊息，這裡就配置為`false`
* <p>
* 如服務端返回：{code:[1|0], rdata:{}, msg:'您無權訪問該介面'}，用rdata返回實際的交易資料，msg標識錯誤提示訊息，這裡就配置為`true`
*/
errInfoOutDataObj = false
複製程式碼onReqErrPaserMsg
/**
* 【可選】`UtilHttp#onReqErrPaserMsg(response)=>{string}`
* 當發生業務級錯誤時候被呼叫，用於給應用提供轉意或者解析錯誤訊息的機會，如果返回的字串為空，否顯示預設解析到的錯誤結果。
* <p>
* 回撥返回非空字元，視為應用處理了本次錯誤訊息，否顯示預設解析到的錯誤結果。
*/
onReqErrPaserMsg = null
複製程式碼defShowLoading [*]
/**
* 【可選】配置是否在傳送請求的時候顯示loading
* <p>
* 建議修改為true，ajax的loading ui需要在配置的時候自行實現`utilHttp#loading和utilHttp#hideLoading`兩個介面，這樣就方便應用適配符合自己的UI元件
*/
defShowLoading = false
複製程式碼loading [*]
/**
*【可選】$vp#loading(hintText)
* <p>
* 當傳送請求的時候，會被呼叫，並傳遞傳送請求時候傳遞的[@param loadingHintText 當需要顯示loading時候，需要顯示在loading上面的文字]，用於應用自己實現loading ui，這樣就方便應用適配符合自己的UI元件
*/
loading = null
複製程式碼hideLoading [*]
/**
*【可選】$vp#hideLoading()
* <p>
* 當傳送請求出現錯誤或者完成請求處理的時候被呼叫，用來關閉loading ui元件，注意因為某些原因這裡可能為出現當前請求沒有需要loading，但是這個方法也會被觸發
*/
hideLoading = null
複製程式碼ajaxMixin
/**
* JsBridge代理請求配置
*/
ajaxMixin: {
複製程式碼ajaxMixin.eventName
/**
* 傳送JSBridge請求時候`command`的事件名稱，參考`js-bridge-context.js`模組關於和客戶端互動的command配置
*/
eventName = 'AjaxEvent',
複製程式碼ajaxMixin.actionName
/**
* 傳送JSBridge請求時候`command`的活動名稱，參考`js-bridge-context.js`模組關於和客戶端互動的command配置
*/
actionName = 'sendOriginalRequest'
複製程式碼onPageTo
/**
* 【可選】呼叫`$vp#pageTo(n)`時，跳轉前會通知當前鉤子函式，如果配置
*/
onPageTo = null
複製程式碼onPageReplace
/**
* 【可選】呼叫`$vp#pageReplace(location)`時，跳轉前會通知當前鉤子函式，如果配置
*/
onPageReplace = null
複製程式碼onPageNext
/**
* 【可選】呼叫`$vp#pageNext(location)`時，跳轉前會通知當前鉤子函式，如果配置
*/
onPageNext = null
複製程式碼onPageGoBack
/**
* 【可選】呼叫`$vp#pageGoBack()`時，跳轉前會通知當前鉤子函式，如果配置
*/
onPageGoBack = null
複製程式碼onPageHref
/**
* 【可選】呼叫`$vp#pageHref(url)`時，跳轉前會通知當前鉤子函式，如果配置
*/
onPageHref = null
複製程式碼API介面
getAjaxInstance
/**
* 獲取外掛配置的axios例項物件
* @returns {*}
*/
getAjaxInstance()
複製程式碼ajaxUpdateInstance
/**
* 通過自定義axios options配置，重新建立axios例項物件
* @param options
*/
ajaxUpdateInstance(options)
複製程式碼onParseServerResp
/**
* $vp.onParseServerResp(response)
* 統一業務級別錯誤介面
* <p>
* 方便應用自己呼叫該方法判斷業務級別錯誤，如在`$vp#ajaxAll`時候，外掛沒有幫應用進行業務成功與否的判斷，應用可以呼叫`$vp#$vp.onParseServerResp(response)`來呼叫統一業務級別錯誤介面來根據自己的需求對判斷進行後續處理
* @returns {Boolean} true 標識業務級別成功，否則為失敗
*/
onParseServerResp(response)
複製程式碼ajaxAll
/**
* 執行多個併發請求，應用需要自行解析返回結果陣列
* @param {Array} [ajaxArr=[]] 每一個item都可以配置為`UtilHttp#ajaxMixin`的引數，排除`showLoading和loadingHintText`
* @param {Boolean} [showLoading=false] 是否顯示loading ui，將會呼叫`UtilHttp#loading(loadingHintText)`配置，預設為`UtilHttp#defShowLoading`配置（true）
* @param {String} [loadingHintText='載入中...'] 當需要顯示loading時候，需要顯示在loading上面的文字
* @returns {Promise} 注意返回的是一個二維陣列，每一個item就是一個axios預設的響應結果，需要自己手動處理，如：
* const res = _.map(resArr, (item) => {
* return item.data
* })
* 取出每個交易的響應內容
* @returns {Promise<any>}
*/
ajaxAll(ajaxArr = [], {
showLoading = _defShowLoading,
loadingHintText = '載入中...'
} = {})
複製程式碼ajaxMixin
/**
* ajaxMixin(url[, config])
* 支援普通的Ajax GET/POST(預設)請求 和 客戶端橋接訪問
* @param {String} [url=undefined] 交易碼|完整請求url
* @param {Object} [params={}] 請求引數，支援method【'GET'| 'POST'| 'NATIVE'】
* @param {Object} [axiosOptions={}] axios options
* @param {Boolean} [showLoading=false] 是否顯示loading ui，將會呼叫`UtilHttp#loading(loadingHintText)`配置，預設為`UtilHttp#defShowLoading`配置（true）
* @param {String} [loadingHintText='載入中...'] 當需要顯示loading時候，需要顯示在loading上面的文字
* @param {Boolean} [needHandlerErr=true] 是否需要進行預設的錯誤處理，方便某些**零星交易**不需要進行統一業務邏輯處理的時候，繞過外掛提供的業務處理邏輯，此外也可以通過配置`$vp#onSendAjaxRespErr`來進行統一業務處理的**應用統一前置處理**
* @param {String} [mode='POST'] 請求的method【'GET'| 'POST'| 'NATIVE'】，預設使用初始化配置時候傳遞的`utilHttp#mode = POST`引數賦初值
* @returns {Promise}
*/
ajaxMixin(url, {
params = {},
axiosOptions = {},
showLoading = _defShowLoading,
loadingHintText = '載入中...',
needHandlerErr = true,
mode = _defMode
} = {})
複製程式碼ajaxGet
/**
* 傳送GET請求
* <p>
* 底層交由`$vp#ajaxMixin`處理
*
* @param {String} [url=undefined] 交易碼|完整請求url
* @param {Object} [params={}] 請求引數，支援method【'GET'| 'POST'| 'NATIVE'】
* @param {Object} [axiosOptions={}] axios options
* @param {Boolean} [showLoading=false] 是否顯示loading ui，將會呼叫`UtilHttp#loading(loadingHintText)`配置，預設為`UtilHttp#defShowLoading`配置（true）
* @param {String} [loadingHintText='載入中...'] 當需要顯示loading時候，需要顯示在loading上面的文字
* @param {Boolean} [needHandlerErr=true] 是否需要進行預設的錯誤處理，方便某些**零星交易**不需要進行統一業務邏輯處理的時候，繞過外掛提供的業務處理邏輯，此外也可以通過配置`$vp#onSendAjaxRespErr`來進行統一業務處理的**應用統一前置處理**
* @returns {Promise}
*/
ajaxGet(url, {
params = {},
axiosOptions = {},
showLoading = _defShowLoading,
loadingHintText = '載入中...',
needHandlerErr = true
} = {})
複製程式碼ajaxPost
/**
* 傳送POST請求
* <p>
* 底層交由`$vp#ajaxMixin`處理
*
* @param {String} [url=undefined] 交易碼|完整請求url
* @param {Object} [params={}] 請求引數，支援method【'GET'| 'POST'| 'NATIVE'】
* @param {Object} [axiosOptions={}] axios options
* @param {Boolean} [showLoading=false] 是否顯示loading ui，將會呼叫`UtilHttp#loading(loadingHintText)`配置，預設為`UtilHttp#defShowLoading`配置（true）
* @param {String} [loadingHintText='載入中...'] 當需要顯示loading時候，需要顯示在loading上面的文字
* @param {Boolean} [needHandlerErr=true] 是否需要進行預設的錯誤處理，方便某些**零星交易**不需要進行統一業務邏輯處理的時候，繞過外掛提供的業務處理邏輯，此外也可以通過配置`$vp#onSendAjaxRespErr`來進行統一業務處理的**應用統一前置處理**
* @returns {*|Promise}
*/
ajaxPost(url, {
params = {},
axiosOptions = {},
showLoading = _defShowLoading,
loadingHintText = '載入中...',
needHandlerErr = true
} = {})
複製程式碼pageHref
/**
* 通過`window.location.href`進行頁面跳轉
* <p>
* 跳轉前會通知`utilHttp#onPageHref(url)`鉤子函式，如果配置
* @param url
* @returns {$vp}
*/
pageHref(url)
複製程式碼pageTo(n = -1)
/**
* n個頁面回退(基於Router)
* <p>
* 跳轉前會通知`utilHttp#onPageTo(n, router)`鉤子函式，如果配置
* @returns {$vp}
*/
pageTo(n)
複製程式碼pageGoBack()
/**
* 單個頁面回退(基於Router)
* <p>
* 跳轉前會通知`utilHttp#onPageGoBack(router)`鉤子函式，如果配置
* @returns {$vp}
*/
pageGoBack()
複製程式碼pageNext(location = {path: '/'})
/**
* 頁面導航(基於Router)
* <p>
* 跳轉前會通知`utilHttp#onPageNext(location, router)`鉤子函式，如果配置
* @param location
* @returns {plugin}
*/
pageNext(location)
複製程式碼pageNext
/**
* 頁面導航(基於Router)，移除上一個頁面
* <p>
* 跳轉前會通知`utilHttp#onPageReplace(location, router)`鉤子函式，如果配置
* @param location
* @returns {plugin}
*/
pageReplace(location = {path: '/'})
複製程式碼