Vue 减小和服务端交互的样板代码一种方法

时间 2019-11-17 标签 vue 减小服务交互样板代码一种方法

若是你们以为有用，更多的模块请点击查看javascript

系列文章html

扫码访问vue

下面介绍一下vue-viewplus 一个简化Vue应用开发的工具库中的util-http.js 针对axios进行了二次封装的ajax模块。java

模块对axios进行了一次封装，目的是为了减小开发人员的工做量，简化和服务器端、客户端（JSBridge 代理请求）的交互，配合login-state-check.js模块进行身份认证权限控制。android

为何咱们须要再封装axios，由于咱们在想要作这个插件的时候已经经历了几个项目，不论是否是先后台分离或者是否服务端是RESTFull类型服务，在发送请求和处理请求的时候，对于一个企业级（或者简单应用）都会存在或多或少的样板代码，那咱们在实践的过程当中就一步一步把这些样本代码抽离了业务，使得开发人员更容易关注于业务自己，这样就提升了开发效率，避免了一些没必要要的错误，而这个模块提供了一下几点抽象：ios

帮咱们处理了大部分业务级错误。何为业务级错误？由于不少的后端返回的数据都非严格意义上的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)

下面的接口可能会涉及到服务端返回数据的描述，这里咱们先假定一下基本的服务端响应数据格式。git

因为要服务端数据须要描述业务是否成功和业务失败的缘由，所以咱们来约定一下服务端返回数据的结构。github

在任何状况下，服务器返回的body中的JSON数据必须是一个对象，用code返回业务状态，用data返回客户端要请求的实际数据，用message返回业务失败后的提示信息；其中code值为1时表示业务成功，code值为其它时表示业务失败；其中data能够是{}|[]。须要特别注意的是有些服务端会把httpCode同时做为业务状态码，这也是彻底正确的，封装原理与本文相同。ajax

服务端返回的数据的结构应该是：

{
    "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: '/'})
复制代码