Vue Axios Two-time package

This time to tell the project need to use the Vue.
When I first started framing, I used the vue-resource to see the official recommendation Axios.

Defining common parameters and introducing components:

Import Axios from ' Axios ' import qs from ' qs ' axios.interceptors.request.use (config => {store.commit (' Update_loadin G ', true]//display loading return config}, error => {return Promise.reject (Error)}) Axios.interceptors.response.use ( Response => {return response}, error => {return promise.resolve (error.response)}) function ErrorState (respo  NSE) {store.commit (' update_loading ', false)//Hide LOADING console.log (response)//If the HTTP status code is normal, the data is returned directly if (response && (Response.Status = = | | response.status = = 304 | | response.status = =)) {return response/
            /If you do not need data other than information, you can return directly to Response.data}else{Vue.prototype. $msg. Alert.show ({title: ' Hint ', Content: ' Network Exception '}}} function Successstate (res) {store.commit (' update_loading ', false)//Hide LOADING//
            Unified judgment back-end returned error code if (Res.data.errCode = = ' 000002 ') {vue.prototype. $msg. Alert.show ({title: ' Hint ', Content:res.data.errdesc| | '
       Network Exception ', OnShow () {}, Onhide () {console.log (' OK ')} 
            })}else if (res.data.errCode!= ' 000002 ' &&res.data.errcode!= ' 000000 ') {vue.prototype. $msg. Alert.show ({ Title: ' Hint ', content:res.data.errdesc| | '
       Network Exception ', OnShow () {}, Onhide () {console.log (' OK ')} }} Const Httpserver = (opts, data) => {Let public = {//common parameter ' srappid ': ""} Let Httpdefau
          ltopts = {//http default configuration Method:opts.method, BaseURL, Url:opts.url, timeout:10000,  Params:Object.assign (public, data), Data:qs.stringify (object.assign (public, data), headers: opts.method== ' Get '? {' X-requested-with ': ' XMLHttpRequest ', ' Accept ': ' Application/json ', ' content-type ': "Application/json;
     Charset=utf-8 "}:{       ' X-requested-with ': ' XMLHttpRequest ', ' content-type ': ' application/x-www-form-urlencoded; Charset=utf-8 '}} if (opts.method== ' get ') {delete Httpdefaultopts.data}else{delete HT Tpdefaultopts.params} Let Promise = New promise (function (resolve, reject) {Axios (httpdefaultopts). The N ((res) => {successstate (res) resolve (RES)}). catch ((response) =& Gt

    {errorstate (response) Reject (response)}) }) return promise} export default Httpserver

Packing Reason:

1, can and back-end to negotiate good error code in this unified tip unified treatment, eliminating unnecessary trouble

2, if you do interface full message encryption and decryption can be handled here

Interface Unified Collation:

Const Servicemodule = {
  getLocation: {
    URL: ' service/location/transfor ', method
    : ' Get '
  }
}
Const Apisetting = {... servicemodule}

export Default apisetting

Collation Benefits:

1, late interface upgrade or interface name changes easy to maintain

HTTP invocation:

<script>
Import http from ". /.. /lib/http.js ";
Import apisetting from ". /.. /lib/apisetting.js ";
Export Default {
  created:function () {
    http (apisetting.getlocation,{"Srchannel": "H5",})
    . Then ((res) =>{
      Console.log (res)
    }, (Error) =>{
      console.log (Error)}	
    )
   },
  methods: {
  
  }
}
</script>