Vue 頁面狀態保持頁面間數據傳輸的一種方法

若是你們以爲有用，更多的模塊請點擊查看

• 系列文章

  • 用Vue來進行移動Hybrid開發和客戶端間數據傳輸的一種方法
  • Vue 頁面狀態保持頁面間數據傳輸的一種方法
  • Vue 前端應用進行身份認證權限控制的一種方法
  • Vue 減小和服務端交互的樣板代碼一種方法

點擊訪問demo

掃碼訪問

util-http.js

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都屬於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: '/'})
複製代碼