Vue Axios Two-time package

Source: Internet
Author: User
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>




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.