If you find it useful, please click here to see more modules
-
series
- Vue is a method for mobile Hybrid development and data transfer between clients
- Vue page state is a method of maintaining data transfer between pages
- Vue front-end application is a method of identity authentication permission control
- Vue is a way to reduce boilerplate code that interacts with the server
Click to visit demo
Sweep the code to access
Here’s a look at the Ajax module re-wrapped against AXIOS in uti-http. js in VUE-ViewPlus, a library of tools to simplify VUE application development.
The module encapsulates AXIOS in order to reduce the workload of developers, simplify the interaction with server and client (JSBridge proxy request), and cooperate with login-state-checke.js module for identity authentication permission control.
Why do we need to encapsulate axios, because we want to do when the plug-in has experienced several projects, regardless of whether Taiwan before and after separation or whether the server is RESTFull type service, at the time of sending a request and process the request, for an enterprise application (or simple) there are more or less boilerplate code, In the process of practice, we take the sample code step by step away from the business, making it easier for developers to focus on the business itself, thus improving the development efficiency and avoiding some unnecessary errors. This module provides the following abstractions:
- Helped us handle most of the business-level errors. What is a business-level error? Because much of the data returned by the back end is not strictly RESTFull results, the concern here is that many services do not identify a request error with a status code that is not 200 in the HTTP specification, but rather have custom error codes that provide an impulse for uniform business error handling. It would be easy, of course, to add a uniform misjudgment of canonical form to this
- Help us for special request broker, because of the added a layer, we can do a lot of things, here we can make Ajax programming of Ajax, namely in the mobile application development, because of cross-domain and WebView Ajax requests are difficult to configure SSL encryption certificate for data two requirements, we can make a request is sent to the client, Then the client proxy front-end completes the sending of the request, which involves the interaction between the front-end and the client, namely JSBridge interaction. We already have a set of Android-ViewPlus, an Android hybrid client development library, to solve the JSBridge client interaction process. So here we can simply add this layer in the middle to fulfill these two requirements
- About the cooperation
login-state-check.jsModule identity authentication permission control, you can view the current moduleaccessRules.sessionTimeOutandaccessRules.onSessionTimeOutBecause the real control of the session is usually in the background, if the session or token in the background expires, the server will definitely return an error, so the current module passes the above twoaccessRulesTo enable the application to intercept this opportunity and clean up the login status maintained by the plug-in login-state-check.js module before notifying the application:loginStateCheckInstall.modifyLoginState(false)
The following interfaces may relate to the description of the data returned by the server, but let’s assume the basic server response data format.
Since the server data needs to describe whether the business succeeds and why the business fails, let’s agree on the structure of the data returned by the server.
In any case, the JSON data in the body returned by the server must be an object, using code to return the business state, data to return the actual data that the client is requesting, and Message to return a message indicating a business failure. If the value of code is 1, the service succeeds; if the value of code is other, the service fails. The data can be a {} | []. It is important to note that some servers will also use httpCode as a business state code. This is also true, and the encapsulation principle is the same as in this article.
The structure of the data returned by the server should be:
{
"code": [1| "Other strings such as session_timeout_err"]."data": [{} | []]."message": "Error message | information correctly"
}
Copy the codeThe sample
Browse online examples
<template>
<div id="UtilHttp">
<group title="Ajaxmixin-get request" label-width="15em">
<box gap="10px 10px">
<x-button @click.native="doGet" :disabled="doGetBtnState">Send the GET request with $vp#ajaxMixin</x-button>
</box>
</group>
<group title="Ajaxmixin-post request" label-width="15em">
<box gap="10px 10px">
<x-button @click.native="doPost" :disabled="doPostBtnState">Send a POST request using $vp#ajaxMixin</x-button>
</box>
</group>
<group title="AjaxAll request" label-width="15em">
<box gap="10px 10px">
<p class="hint-msg">For this method plug-in does not help the application to determine whether the business is successful, but the application can call '$vp#$vp.onParseServerResp(Response)' to call the uniform business level error interface to follow up on the judgment based on its own needs</p>
<x-button @click.native.stop="doAjaxAll" :disabled="ajaxAllBtnState">Send the request with $vp#ajaxAll</x-button>
</box>
</group>
<group title="Ajaxmixin-native Request" label-width="15em">
<box gap="10px 10px">
<span class="hint-msg-warn">This function requires client JsBridge capability, if not modified, please do not click;)</span><br/>
<x-button @click.native="doHttpNative" :disabled="doHttpNativeBtnState">Native request testing</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: 'Request successful, response result'.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: 'Request successful, response result'.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
// The data attribute in axios should be parsed manually
const res = _.map(resArr, (item) => {
return item.data
})
this.$vp.uiDialog(res, {
title: 'Request successful, response result'.showCode: true
})
})
},
doHttpNative() {
this.doHttpNativeBtnState = true
this.$vp
.ajaxMixin('TIMESTAMP', { mode: 'NATIVE' })
.then(res= > {
this.$vp.uiDialog(res, {
title: 'Request successful, response result'.showCode: true
})
this.doHttpNativeBtnState = false
})
.catch((err) = > {
this.$vp.uiDialog(err, {
title: 'Request failed, response result'.showCode: true
})
this.doHttpNativeBtnState = false}}})</script>
Copy the codeExample Required configurations:
Vue.use(ViewPlus, {
/ /...
utilHttp: {
baseURL: 'http://localhost:7000'.// For the data key, see the jSONP output configuration of the Mock Server
dataKey: 'data'.statusCodeKey: 'code'.statusCode: '1'.msgKey: 'msg'.needBase64DecodeMsg: false,
loading(loadingHintText) {
this.uiLoading(loadingHintText)
},
hideLoading() {
this.uiHideLoading()
},
errDialog(content = 'Error message not defined') {
this.dialog(content)
return this
},
accessRules: {
sessionTimeOut: ['role.invalid_user'.'validation.user.force.logout.exception'],
onSessionTimeOut(response) {
this.dialog(` onSessionTimeOut callback:${response.msg}`, {
title: 'Callback notification'})},unauthorized: ['core_error_unauthorized'],
onUnauthorized(response) {
this.dialog('onUnauthorized Callback application processing:${response.msg}`, {
title: 'Callback notification'})}}}})Copy the codeconfiguration
About axios configuration, which can be reference axios# config. The timeout, general identification [axios# config. The timeout] (https://github.com/axios/axios#request-config) are part of the configuration of axios
baseURL *
/** * [optional] 'baseURL' automatically precedes' url 'unless' url 'is an absolute URL. It can facilitate passing relative urls * * to axios instance methods by setting a 'baseURL' [axios#config.timeout](https://github.com/axios/axios#request-config) */
baseURL = {String}
Copy the codetimeout
/** * [Optional] 'timeout' specifies the number of milliseconds for the request to timeout (0 indicates no timeout). If the request takes longer than timeout, The request will be interrupt * < p > * [axios# config. The timeout] (https://github.com/axios/axios#request-config) * /
timeout = 6000
Copy the codeparams
/** * [Optional] 'params' is the URL parameter to be sent with the request must be a plain object or URLSearchParams object * * [axios#config.timeout](https://github.com/axios/axios#request-config) */
params = null
Copy the codeheaders
/ * * * [optional] ` headers ` is about to be sent by the custom request header * < p > * [axios# config. The timeout] (https://github.com/axios/axios#request-config) * /
headers = null
Copy the codewithCredentials
/ * * * said cross-domain request whether need to use the credentials * < p > * [axios# config. The timeout] (https://github.com/axios/axios#request-config) * /
withCredentials = false
Copy the codemode
/ * * * the default request method optional 】 【 【 'GET' | 'POST' | 'NATIVE'] * < p > * note: If the majority of transactions across the application require the ** client proxy to forward requests (involving front-end and client interactions, i.e. JSBridge interactions, we already have an Android-ViewPlus hybrid android client development library that addresses JSBridge client interactions) **, $vp#ajaxMixin = 'NATIVE'; $vp#ajaxMixin = 'NATIVE'; $vp#ajaxMixin = 'NATIVE'
mode = 'POST'
Copy the codeonSendAjaxParamsHandle
/** * '$vp#onSendAjaxParamsHandle(url, params, mode)=>{}' * * If this function is configured, it means that no processing is required by the plugin (currently the plugin only does qs.stringify(params) processing for POST requests) */
onSendAjaxParamsHandle = null
Copy the codestatusCodeKey [*]
UtilHttp#onParseServerResp = UtilHttp#onParseServerResp = UtilHttp#onParseServerResp = UtilHttp#onParseServerResp = UtilHttp#onParseServerResp {code: [1] | 0}, use code to return to the business state, here is configured to ` code ` * /
statusCodeKey = 'code'
Copy the codestatusCode [*]
HttpUtil# onParseServerResp: httpUtil#onParseServerResp: httpUtil#onParseServerResp: httpUtil#onParseServerResp: {code: [1] | 0}, use code to return to the business state, one identified as a * * * * success, there is configured to ` ` * / 1
statusCode = '1'
Copy the codeonSendAjaxRespHandle
/** * [Optional] '$vp#onSendAjaxRespHandle(response)=>{}' It will be the first time to return the background data to the function for preprocessing * < P > ** after the return of ** preprocessing response result object **, it will be unified business judgment and other subsequent processing logic */
onSendAjaxRespHandle = null
Copy the codeonParseServerResp [*]
/ * * * [optional] ` $vp# onParseServerResp (response) = > (true | false] ` * application manually for the success of the business logic judgment, the callback function, if the configuration of the callback function, You do not need to configure ` UtilHttp# statusCode && UtilHttp# statusCodeKey ` * < p > * return true identity request success | false identification errors, Plug-in will find returns the response data of the ` UtilHttp# [msgKey | errMsgKey] ` corresponding messages, call ` UtilHttp# errDialog ` * / feedback to users
onParseServerResp = null
Copy the codeonSendAjaxRespErr
/** * [optional] '$vp#onSendAjaxRespErr(Response)' * this function is called when a business-level error has occurred. If this function returns true, the application has handled the requested error. Otherwise, the plugin will handle it. Plug-in will find returns the response data of the ` UtilHttp# [msgKey | errMsgKey] ` corresponding messages, call ` UtilHttp# errDialog ` * / feedback to users
onSendAjaxRespErr = null
Copy the codeerrCodeKey
/** * [optional] UtilHttp#statusCode (optional, UtilHttp#statusCode) * * If the server returns a key for the error code: | 0 {code: [1], err_code: 'auth_err}, with err_code return an error code, here is configured to ` err_code `, no plug-ins will read ` code ` as error code, * * and according to the error code do [session timeout | insufficient permissions | invalid pop-up error dialog] judgment * * * /
errCodeKey = ' '
Copy the codenoNeedDialogHandlerErr
/ * * * [optional] don't need the plugin when business level error pop up error message rules set (using array format), configure the background response returned ` UtilHttp# [errCodeKey | statusCode] ` corresponding error code * < p > * if the server returns: | 0 {code: [1], err_code: 'auth_err}, ` auth_err ` can as configuration items here: [' auth_err], when the plug-in detected the error code in this collection, won't pop up error message * /
noNeedDialogHandlerErr = null
Copy the codeaccessRules
/** * Access control rule */
accessRules: {
Copy the codeaccessRules.sessionTimeOut
/ * * * [optional] session timeout rule sets (using array format), when business level error, in view of the session timeout * * * * the background when the returned ` UtilHttp# [errCodeKey | statusCode] ` corresponding error code to match * < p > * if the server returns: | 0 {code: [1], err_code: 'session_time_out}, ` session_time_out ` can as configuration items here: ['session_time_out'], which identifies an expired session. When the plugin detects an expired session code in the collection, * will invoke the 'UtilHttp#onSessionTimeOut' callback function to notify the application for re-login, etc. Because detecting whether a session times out is triggered only when a request is sent to the background interface that requires authentication. . Second, plug-in invokes ` loginStateCheck modifyLoginState ` * remove plugins active maintenance state and persistent login information to log in, see ` login - state - check. Corresponding interface * / js ` module
sessionTimeOut = null
Copy the codeaccessRules.onSessionTimeOut
/** * $vp#onSessionTimeOut(response) For session timeout * * * * the background when the returned ` UtilHttp# [errCodeKey | statusCode] ` corresponding error judgment for the session timeout callback * /
onSessionTimeOut = null
Copy the codeaccessRules.unauthorized
/ * * * "optional" insufficient permissions set rules (using array format), when business level error, in view of the session timeout * * * * the background when the returned ` UtilHttp# [errCodeKey | statusCode] ` corresponding error code to match * < p > * if the server returns: | 0 {code: [1], err_code: 'auth_fail}, ` auth_fail ` can as configuration items here: ['auth_fail'], which indicates that this is an unauthorized error. When the plug-in detects that the current error code is in this collection, the 'UtilHttp#onUnauthorized' callback function will be invoked to notify the application so that the application can be prompted or a page is pop-up */
unauthorized = null
Copy the codeaccessRules.onUnauthorized
/** * [Optional] $vp#onUnauthorized(response) For the session timeout * * * * the background when the returned ` UtilHttp# [errCodeKey | statusCode] ` corresponding error code to match * /
onUnauthorized = null
Copy the codedataKey
/** * [optional] The json object returned by the server stores the key of the object (business status code, error message, data that needs to be returned to the front end), some background interfaces have it, some do not * {String} * * | 0 {code: [1], rdata: {}}, with rdata returns the actual transaction data, here is configured to ` rdata `, otherwise don't have to configure * < p > * if there is the configuration, so after the request is successful, 'Promise#resolve' returns the value of server response.datakey, while 'Promise#reject' returns the value of 'UtilHttp#errInfoOutDataObj' is discriminated */
dataKey = 'data'
Copy the codemsgKey
/** * UtilHttp#errDialog, UtilHttp#errDialog, UtilHttp#errDialog, UtilHttp#errDialog, UtilHttp#errDialog, UtilHttp#errDialog | 0 {code: [1], MSG: 'you have no right to access the interface'}, use MSG returns the actual transaction data of error messages, here is configured to ` MSG ` * /
msgKey = 'msg'
Copy the codeerrMsgKey
/** * [optional] UtilHttp#msgKey (optional, UtilHttp#msgKey) * * If the server returns: | 0 {code: [1], errmsg: 'you have no right to access the interface'}, with errmsg returns the actual transaction data in the error message, here is configured to ` errmsg `, otherwise don't configuration, * * the plugin will try to find ` UtilHttp# msgKey ` * * * /
errMsgKey = 'errmsg'
Copy the codeerrDialog [*]
/ * * * ` UtilHttp# errDialog (errMsg) ` * when send/request error | born business level error is invoked, this convenient application adaptation in line with their own UI components * /
errDialog = window.alert
Copy the codeerrInfoOutDataObj
/** * [Optional] Whether the error message returned by the server is not in the object corresponding to 'UtilHttp#dataKey' * * | 0 {code: [1], rdata: {MSG: 'you have no right to access the interface'}}, with rdata returns the actual transaction data, MSG id error message, here is configured to ` false ` * < p > * if the server returns: | 0 {code: [1], rdata: {}, MSG: 'you have no right to access the interface'}, with rdata returns the actual transaction data, MSG id error message, here is configured to ` true ` * /
errInfoOutDataObj = false
Copy the codeonReqErrPaserMsg
/** * [Optional] 'UtilHttp#onReqErrPaserMsg(Response)=>{string}' * UtilHttp#onReqErrPaserMsg(Response)=>{string} '* UtilHttp#onReqErrPaserMsg(Response)=>{string}' * UtilHttp#onReqErrPaserMsg(Response)=>{string} ' * * If a callback returns a non-null character, the application processes the error message. Otherwise, the error result parsed by default is displayed. * /
onReqErrPaserMsg = null
Copy the codedefShowLoading [*]
/** * [Optional] Whether to enable loading * * When sending a request The loading UI of Ajax needs to be configured to implement both 'utilHttp#loading' and 'utilHttp#hideLoading' interfaces so that the application can fit its OWN UI components */
defShowLoading = false
Copy the codeloading [*]
/** * $vp#loading(hintText) * * ] is used by the application to implement its own loading UI, so that the application can easily adapt to its own UI components */
loading = null
Copy the codehideLoading [*]
/** * $vp#hideLoading() * But this method is also triggered */
hideLoading = null
Copy the codeajaxMixin
/** * JsBridge proxy request configuration */
ajaxMixin: {
Copy the codeajaxMixin.eventName
/** * The event name of 'command' when sending a JSBridge request, see 'js-bridge-context.js' module for command configuration for interacting with the client */
eventName = 'AjaxEvent'.Copy the codeajaxMixin.actionName
/** * The active name of 'command' when sending a JSBridge request, refer to the 'js-bridge-context.js' module's command configuration for interacting with clients */
actionName = 'sendOriginalRequest'
Copy the codeonPageTo
$vp#pageTo(n); $vp#pageTo(n); $vp#pageTo(n)
onPageTo = null
Copy the codeonPageReplace
$vp#pageReplace(location) {$vp#pageReplace(location)
onPageReplace = null
Copy the codeonPageNext
$vp#pageNext(location) = $vp#pageNext(location)
onPageNext = null
Copy the codeonPageGoBack
$vp#pageGoBack(); $vp#pageGoBack()
onPageGoBack = null
Copy the codeonPageHref
$vp#pageHref = $vp#pageHref = $vp#pageHref = $vp#pageHref
onPageHref = null
Copy the codeAPI interface
getAjaxInstance
/** * get the axios instance object of the plug-in configuration * @returns {*} */
getAjaxInstance()
Copy the codeajaxUpdateInstance
/** * Re-create the axios instance object with a custom AXIos options configuration * @param options */
ajaxUpdateInstance(options)
Copy the codeonParseServerResp
$vp.onParseServerResp(response) $vp.onParseServerResp(response) * An application can call '$vp#$vp.onParseServerResp(Response)' to invoke the unified Business-level error interface to perform subsequent processing on the judgment based on its own requirements * @returns {Boolean} true Indicates success at the business level. Otherwise, it indicates failure */
onParseServerResp(response)
Copy the codeajaxAll
@param {Array} [ajaxArr=[]] Each item can be configured as an argument to 'UtilHttp#ajaxMixin', Exclude 'showLoading and loadingHintText' * @param {Boolean} [showLoading=false] The 'UtilHttp#loading(loadingHintText)' configuration will be invoked, Default is' UtilHttp#defShowLoading 'configuration (true) * @param {String} [loadingHintText=' loading...'] When loading is required, Note that a two-dimensional array is returned, and each item is an AXIos default response result, which needs to be processed manually. For example: * const res = _.map(resArr, (item) => {* return item.data *}) * Retrieve the response content for each transaction * @returns {Promise
} */
ajaxAll(ajaxArr = [], {
showLoading = _defShowLoading,
loadingHintText = 'Loading... '
} = {})
Copy the codeajaxMixin
/** * ajaxMixin(url[, Config]) * support common Ajax GET/POST (default) requests and client bridge access * @ param {String} [url = undefined] transaction code | full request url * @ param {Object} [params={}] Request parameters Support method [' GET '|' POST '|' NATIVE '] * @ param {Object} [axiosOptions = {}] axios options * @ param {Boolean} [showLoading=false] If loading UI is displayed, 'UtilHttp#loading(loadingHintText)' configuration will be invoked, Default is' UtilHttp#defShowLoading 'configuration (true) * @param {String} [loadingHintText=' loading...'] When loading is required, * @param {Boolean} [needHandlerErr=true] Whether the default error handling is required, so as to bypass the business processing logic provided by the plug-in when the uniform business logic processing is not required for some ** transactions. In addition can also be configured ` $vp# onSendAjaxRespErr ` for unified business processing application unified pre-processing * * * * * @ param {String} [mode = 'POST'] request method [' GET '|' POST '| 'NATIVE'], default to use the 'utilHttp#mode = POST' parameter passed during initial configuration for initial value * @returns {Promise} */
ajaxMixin(url, {
params = {},
axiosOptions = {},
showLoading = _defShowLoading,
loadingHintText = 'Loading... ',
needHandlerErr = true,
mode = _defMode
} = {})
Copy the codeajaxGet
/ send a GET request * * * * < p > * bottom to ` $vp# ajaxMixin ` processing * * @ param {String} [url = undefined] transaction code | full request url * @ param {Object} [params={}] Request parameters Support method [' GET '|' POST '|' NATIVE '] * @ param {Object} [axiosOptions = {}] axios options * @ param {Boolean} [showLoading=false] If loading UI is displayed, 'UtilHttp#loading(loadingHintText)' configuration will be invoked, Default is' UtilHttp#defShowLoading 'configuration (true) * @param {String} [loadingHintText=' loading...'] When loading is required, * @param {Boolean} [needHandlerErr=true] Whether the default error handling is required, so as to bypass the business processing logic provided by the plug-in when the uniform business logic processing is not required for some ** transactions. It is also possible to configure '$vp#onSendAjaxRespErr' for uniform business processing ** * @returns {Promise} */
ajaxGet(url, {
params = {},
axiosOptions = {},
showLoading = _defShowLoading,
loadingHintText = 'Loading... ',
needHandlerErr = true
} = {})
Copy the codeajaxPost
/ * * * to send a POST request * < p > * bottom to a ` $vp# ajaxMixin ` processing * * @ param {String} [url = undefined] transaction code | full request url * @ param {Object} [params={}] Request parameters Support method [' GET '|' POST '|' NATIVE '] * @ param {Object} [axiosOptions = {}] axios options * @ param {Boolean} [showLoading=false] If loading UI is displayed, 'UtilHttp#loading(loadingHintText)' configuration will be invoked, Default is' UtilHttp#defShowLoading 'configuration (true) * @param {String} [loadingHintText=' loading...'] When loading is required, * @param {Boolean} [needHandlerErr=true] Whether the default error handling is required, so as to bypass the business processing logic provided by the plug-in when the uniform business logic processing is not required for some ** transactions. In addition can also be configured ` $vp# onSendAjaxRespErr ` for unified business processing application unified pre-processing * * * * * @ returns {* | Promise} * /
ajaxPost(url, {
params = {},
axiosOptions = {},
showLoading = _defShowLoading,
loadingHintText = 'Loading... ',
needHandlerErr = true
} = {})
Copy the codepageHref
/** * a jump to a page via 'window.location.href' * * is notified to the 'http# onPageHref(URL)' hook function if @param URL * @returns {$vp} */ is configured
pageHref(url)
Copy the codepageTo(n = -1)
/** * N page rollback (based on Router) * * Notify 'utilHttp#onPageTo(n, Router)' hook function before jump, if * @returns {$vp} */ is configured
pageTo(n)
Copy the codepageGoBack()
/** * A single page rollback (based on the Router) * * is notified of the 'utilHttp#onPageGoBack(Router)' hook function before jumping, if * @RETURNS {$vp} */ is configured
pageGoBack()
Copy the codepageNext(location = {path: ‘/’})
/** * the 'utilHttp#onPageNext(location, Router)' hook function is notified before a page navigation (based on the Router) * * * @param location * @returns {plugin} */
pageNext(location)
Copy the codepageNext
/** * page navigation (based on Router), utilHttp#onPageReplace(location, Router) 'hook function is notified before removing a previous page * *, * @param location * @returns {plugin} */
pageReplace(location = {path: '/'})
Copy the code